YouTube IFrame Player doesn't execute cuePlayList correctly

1
votes

I have a website where I create a YouTube player in an IFrame and make it grab different playlists depending on what the user clicks. So it calls player.cuePlaylist({listType:"playlist",list:playListID}) where playListIDis the variable that changes when the user calls for different playlists. The problem is the first time the function gets executed it works fine, but as soon as it's asked a second time to cue a new playList, it doesn't do anything, no 400 error message or anything either, but when I call the second playList a second time, it works.

This cuePlayList function seems to be bugged as this did not occur a month or two ago. The only change I can see to the youtube Iframe API is about search lists, not playlists as you can read here

I recreated the bug in this jsfiddle. Just press the "new playlist" button and it will load the correct playlist, press another playlist and it won't do anything until pressed twice.

So am I doing something wrong or is this on YouTube's IFrame API end?

Thanks in advance!

2
javascriptyoutubeyoutube-iframe-api
I'm having the same issue with both cuePlaylist and loadPlaylist. Thanks for your post, as it's inspired me to give up on trying to read through the Youtube API docs and come up with a workaround. – DFish

2 Answers

2
votes

Instead of destroying the player, meaning you can't use cuePlaylist() and loadPlaylist() anymore, I found out the player accepts the new playlist if you call the cue/load function twice like so: https://jsfiddle.net/5yw2na96/

I found out about this issue by linking the cuePlaylist() function to a button and noticing you need to click twice for the playlist to update correctly. There seems to be a delay needed between the empty call and the actual call so I set it to 500ms.

0
votes

I implemented a workaround by destroying the player and initializing a new one with the playlist I'd like to load.

    embed.destroy();
    embed = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        playerVars:
            {
                listType: 'playlist',
                list: playlistId,
                index: 0
            },
        events: {
            'onReady': function (event) {
                player = event.target;
            }
        }
    });