(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.
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.
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.