How to automatically display the YouTube playlist tray when embedding?

Other Questions YouTube
1

I’m attempting to embed a YouTube playlist using the iframe API but facing an issue with visibility. Currently, the embedded playlist shows a small blue button displaying the number of videos. Users must click this button to reveal the playlist thumbnails, but I want the sidebar to show by default—similar to how it looks on the YouTube platform with all thumbnails visible on the right.

Here’s what I’ve set up so far:

// Load the YouTube API
var scriptElement = document.createElement('script');
scriptElement.src = "https://www.youtube.com/player_api";
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(scriptElement, firstScript);

// Setting up the video player
var myPlayer;
function onYouTubePlayerAPIReady() {
  myPlayer = new YT.Player('player-container', {
      height: '480',
      width: '720',
      videoId: 'g7K8FcGsnp4',
      playerVars: {
                listType:'playlist',
                list: 'PL1234567890ABCDE'
              },
      events: {
          'onReady': readyHandler,
          'onStateChange': stateChangeHandler
      }
  });
}

function readyHandler(){
  console.log('Player is ready.');
}

function stateChangeHandler(){
  console.log('Player state changed.');
}

While the playlist functions well, I want to adjust it to automatically show the video list. Is there a setting that allows this?

I appreciate any guidance you can provide!

2

Unfortunately, the YouTube iframe API doesn’t provide a direct parameter to force the playlist sidebar to display automatically. This is a limitation that many developers encounter when working with embedded playlists. The behavior you’re seeing with the small blue button is the standard implementation that YouTube enforces for embedded content. What you could consider as a workaround is using the regular iframe embed method instead of the JavaScript API. Sometimes the standard embed approach gives you slightly different display options, though it won’t guarantee the sidebar visibility either. Another approach I’ve seen developers use is creating a custom playlist interface alongside the embedded player using YouTube’s Data API to fetch playlist information and display thumbnails separately. This requires more development work but gives you complete control over the presentation.

3

I ran into this exact same issue about six months ago when building a training portal. The playlist sidebar visibility is controlled entirely by YouTube’s interface and there’s no playerVars parameter that forces it open on load. What I ended up doing was implementing a hybrid solution where I used the Data API v3 to pull the playlist metadata and created my own thumbnail navigation next to the embedded player. When users click on a thumbnail in my custom sidebar, I use the player’s loadVideoById method to switch videos. It took some extra development time but gave me the exact user experience I wanted. The API key setup is straightforward and the playlist items endpoint gives you everything you need including thumbnails and titles. This approach also lets you style the playlist navigation to match your site’s design perfectly.