Embed youtube playlist with index; thumbnail is always first video

I think it has something to do with youtube selecting the thumbnail based on the viewport size. I think you'll find the thumbnail will display correctly if the width of the iframe is 430px or less. When it is above that, for some reason it will only show the first thumbnail of the playlist.

iframe(width="280" height="158" src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)

vs

iframe(width="720" height="405" src="https://www.youtube.com/embed/videoseries?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE&index=2" frameborder="0" allowfullscreen)

Same playlist. Different thumbnails. Notice the 280px is showing the correct thumbnail though.

If you embed just the video and attach the playlist to it, the thumbnail will be correct.

iframe(width="720" height="405" src="https://www.youtube.com/embed/K-mG66pwQ5M?list=PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE")

This is something I see you've already discovered. You've manually made the array, so I thought I'd take it one step further.

And automatically generate an array of the videos in the playlist. And then change your iframe src to show the video with the playlist appended to the url.

Based off this Retrieve all videos from youtube playlist using youtube v3 API I've created a javascript thing that pulls all the videoIds from the playlist; adds them to an array; then selects a random video from the array; and puts that into the iframe src.

Here is the code. You'll have to put your own API-Key in there. http://codepen.io/anon/pen/vLoRyL

I'm a total noob at this. So any constructive criticism with my code would be much appreciated. Hope this helps anyone else out there.

$(function() {

// GET A RANDOM VIDEO FROM ALL PLAYLISTS
function randomVideo() {


    // VARIABLES
        // the playlist
        var playlistDon = {url:"PLaQokWZfgbykfIr6NKIcOMxsUC0cltOwE", count:4, name:"Don's Design Lab"};

        // get random video from that playlist
        var indexRando = Math.floor((Math.random() * playlistDon.count));

        // making the array of videos in playlist
        var sum = 0;
        var videoArray = [];


    // CONNECTING TO API
    function getVids(PageToken){
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",{
            part : 'snippet',
            maxResults : 50,
            playlistId : playlistDon.url, // selecting the random playlist
            pageToken : PageToken,
            key: 'YOUR API KEY'
            },
            function(data){
                myPlan(data);
            }
        );
    }

    // GETTING LIST OF VIDEOiDS FROM PLAYLIST
    function myPlan(data){
        var total = data.pageInfo.totalResults;
        var nextPageToken = data.nextPageToken;

        // cycle through the data
        for(var i=0;i<data.items.length;i++){

            // add .items to videoArray
            videoArray.push(data.items[i].snippet.resourceId.videoId);
            sum++ ;


            if(sum === (total) ){ // if the current item number equals the total number of items
                sum = 0; // reset the count
                updateIframe(); // update the iframe
                return;
            }
        }

        if(sum < (total)){
            getVids(nextPageToken);
        }

    }


    function updateIframe() {
        // put that video into the iframe
        var videoUrl = "https://www.youtube.com/embed/" + videoArray[indexRando] +"?list=" + playlistDon.url + "&index=" + indexRando + "&showinfo=1";
        $('.video.random iframe').attr("src", videoUrl);
    }


    getVids();

}



$('button').on('click', function() {
    randomVideo();
});



});