Embed youtube playlist with index; thumbnail is always first video

Question

I'm embedding a Youtube playlist with a special tweak - the starting point should be randomly chosen - by means of the following two snippets:

HTML:

<iframe id="juliacon-player"
        align="center"
        width="560"
        height="315"
        frameborder="0"
        allowfullscreen>
</iframe>

JavaScript at the bottom of the <body>:

<script type="text/javascript">
    var playlistId = 'PLP8iPy9hna6Sdx4soiGrSefrmOPdUWixM',
        videoCount = 61,
        index = Math.floor(Math.random() * videoCount),
        playlistUrl = 'https://www.youtube.com/embed/videoseries?list=' + playlistId + '&index=' + index,
        videoPlayer = document.getElementById('juliacon-player');

    if (videoPlayer) {
        videoPlayer.src = playlistUrl;
    }
</script>

This works well in that it chooses a random video from the playlist and starts at that point (giving the impression of embedding a random video from the list on each page view), but the thumbnail before pressing Play is always the first video.

All resources I can find on how to change the thumbnail for a playlist does so permanently and statically - is there a way to change it so that I can change the thumbnail dynamically? I would of course prefer is this happens semi-automatically, but if I have to script the parameters somehow that's OK too.

score 3 · Accepted Answer · edited May 23 '17 at 11:59

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



});

Embed youtube playlist with index; thumbnail is always first video

1 Answers1