13

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.

3 Answers 3

49

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).

Sign up to request clarification or add additional context in comments.

4 Comments

Just what I needed, thank you. Spent ages trying to work out how to load a playlist by ID without loading a video first.
Does this incur any quota, or is it a 0 quota instruction?
YouTube's own documentation was pretty unclear about this. @shell When you find where to put your API key, I'll let you know the impact on quota ;)
@jbx thanks it works do you have equivalent for changing playlist because loadVideoByUrl doesn't seem compatible with getPlaylist see jsfiddle.net/ogwd8yf6/11
14

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
  }
});
}

3 Comments

How do you play by playlist ID?
I changed my mind some time ago and stopped to use this IFrame API above. I changed to JavaScript API I load the playlist directly from youtube player url: ` swfobject.embedSWF("youtube.com/v/… ... &playlist=yourPlayList ...` and let the player manage the videos.
@Moreno: switch back to IFrame, especially if you want your videos to work on mobile.
4

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.

1 Comment

NB: As this iframe isn't connected to the IFrame API, you can't reference the player with Javascript, ex player.stop().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.