YouTube Playlist With Thumbnails – Pure Javascript & YouTube API v3

(Now Updated for YouTube V3)

Here’s the code:  You Tube Playlist with Thumbnails

 

Over the past week, a client asked me to create a page on their website that showed a YouTube playlist with thumbnails.  The catch was that this page is hosted on Weebly, so it means 1) I can’t install a simple WordPress Plugin (like WonderPlugin Gallery – which is awesome at showing YouTube Playlist by-the-way) and 2) it has to be done in pure JS and 3) had to be in the context of a prebuilt body.  So yeah, I had my work cut out for me.

After nearly 24 non-consecutive hours, I finally have a solution.  Since I found nothing out there that would do what I wanted, I felt the need to put this out there in hopes it will help other people.  I have to give credit where credit is due though.  Thank you alijafarian.com for providing an excellent CSS tutorial on how to make the images float and be responsive.  Also, thank you to the JSFiddle user kmturley for an incredibly useful (and the base for my javascript) example on how to call and parse the JSON object.

Ok, so here it is in all of its glory:  You Tube Playlist with Thumbnails.

What you need:  You will need to get your own YouTube API.  The one in my example is only good for my site. If you simply copy/paste my code to your site, you will get nothing.  You can get a YouTube API for free.

playlist_screnshot

I’m sure you could pretty up the CSS and make it look better.  As you probably notice, the first thumbnail is also the first big video.  I’d like to see if i can get the selected video to kindof ‘grey out’ in the thumbnail so you know which one you’re playing.  Again – more CSS than I know how to do.  Maybe I’ll get to those at some point.  Or if you figure it out, either comment below or send me a ‘contact us’ message.

One thing you’ll notice in the code – there is a manual switch to move the thumbnails to 2, 3, or 4 columns.  I chose three because it fit our site better.  To change this, simply change the <UL> class to be ‘…..-3’ or ‘…..-4’, and so on.

I’m sure you could easily modify this to call a user feed rather than a playlist.  Just modify the json URL.

4 thoughts on “YouTube Playlist With Thumbnails – Pure Javascript & YouTube API v3

  1. Thank you for posting this. I have been trying to do this for the past few days. I’m also commenting here so I can get updates from others who might have suggestions.

    1. Hi Laurie. Thanks for the kudos. Also, you typically need to put your email in the comments in order to get notified of a response to your post. Hopefully you check back in the near future and will put your email address in another comment.

  2. After trying 20 scripts, this was the one that worked, thanks! I’m just wondering if there is a way to display more than 9 videos? Also, is there a way to skip the redundant first small video (same as big vid).
    Thanks!
    Pete

  3. Hi Pete.

    First off, wow….sorry for the really delayed reply. For some reason, I didn’t get notified that you had commented on this. So this may no longer apply to you. However, it might help someone in the future.

    1) To show more than 6. In the call to youtube, you’ll see this in the query string: maxResults=6 Set that to any number you like and the code should display more.

    2) You can alter the javascript to remove the redundant first video. Lines 116 and 117 are executed for the first item. You can comment out line 117 and it will skip the redundancy.

    if (i==0)
    {
    writeBigScreenVideo(e.items[i]);
    //writeThumbnailVideo(e.items[i]);
    }

    However, as users click on various videos on the page, there will be no way for them to go back to the first video unless they refresh the screen. That’s why I left the redundant video.

Leave a Reply

Your email address will not be published.