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.