How to Play a Playlist using YouTube JavaScript API

Question

I'm trying to play a youtube playlist using this JavaScript API for iframe-embeds introduced this January. http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

Note the iframe tag below and the link which has "/p" to denote its a playlist.

<iframe src="http://www.youtube.com/embed/p/ID" width="100%" height="500" frameborder="0"></iframe>

However even in the documentation at http://code.google.com/apis/youtube/iframe_api_reference.html I'm not able to find how can I play a playlist using onYouTubePlayerAPIReady() call.

Answer 1

Since a proper answer was not provided here for playlists using the Playlist ID (i.e. not hardcoding the list of videos), this is the way to use it if you still wish to use the Javascript Youtube IFrame API. You can omit the videoID if the playlist ID is specified in the playerVars as follows:

function onYouTubePlayerAPIReady() 
{
        player = new YT.Player('player', 
        {
          height: '390',
          width: '640',
          playerVars: 
          {
            listType:'playlist',
            list: '<YOURPLAYLISTID>'
          }
        });
}

Hope it helps who's looking for it (as I was).

Answer 2

I found the answer.

Just add 'playlist' to your playerVars and the playlist String|Array.

playerVars: { 'autoplay': 0, 'controls': 1, 'playlist':['your_video_id', '...']},

Like de example below:

var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
  height: '390',
  width: '640',
  videoId: 'your_video_id',
  playerVars: { 'autoplay': 0, 'controls': 1, 'playlist':['your_video_id', '...']},
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

Answer 3

A simple solution that does not require the YouTube IFrame (JavaScript) API is discussed on Embed YouTube Videos, Playlists and More with IFrame Embeds. You can copy the video embed code (iframe version) from one of the videos on YouTube and tweak it like this:

<iframe
    width="560"
    height="315"
    src="http://www.youtube.com/embed?listType=playlist&list=PASTE_YOUTUBE_PLAYLIST_ID&autoplay=1"
    frameborder="0"
    allowfullscreen
></iframe>

Note that there is no video id... instead, the listType and list parameters instruct the player to load a playlist. For your particular requirement, add autoplay=1 to ensure that the videos play automatically without requiring JavaScript code.