How to embed a youtube playlist on your blogger blog

In this tutorial you will see how to create a YouTube video gallery using jQuery and add the Youtube playlist to your Blogger blog. Inside this gallery/playlist, you can add your favorite youtube videos or any video that you want to share with your visitors. Because of its default dimensions (width of 765px), it is recommended to add it just below the blog header, however, you can edit CSS code to fit anywhere you want to add it.

Demo here

To add this video slider/youtube playlist to your blog, please follow these steps below:

Step 1. From your blogger dashboard, go to Template > Edit HTML and click anywhere inside the code area to open the Blogger search box by pressing the CTRL + F keys.

Step 2. Type or paste the tag inside the search box and hit Enter to find it.
Just above this tag, add the following scripts:

Step 3. Now let's add the CSS code. Just above the same tag, add this code:

Step 4. Click on the Save Template button

To make this youtube playlist work we need to add the HTML structure of it:

Step 5. Go to Layout or Pages or anywhere you want to add it and add the following code inside the HTML area (if you want to add it as a widget, paste the code inside a HTML/Javascript gadget by clicking on Add a gadget link within the Layout/Page Elements section):

• #vid1">video_ID_1/default.jpg" class="thumb-vid" />Video NameVideo Description



• #vid2">video_ID_2/default.jpg" class="thumb-vid" />Video NameVideo Description



• #vid3">video_ID_3/default.jpg" class="thumb-vid" />Video NameVideo Description



• #vid4">video_ID_4/default.jpg" class="thumb-vid" />Video NameVideo Description



• #vid5">video_ID_5/default.jpg" class="thumb-vid" />Video NameVideo Description

Add the IDs of your videos to where it says video_ID_..., titles (Video Name) and a brief description (Description). To get the ID of a video, open the video on YouTube and look at the address bar - you need only the last characters after "v="

Note that each video ID should be added two times, the ones in red are for the video and the ones in orange are for the tabs thumbnail.

To add more videos, add two lines like the ones in bold above and then change the video[] and #vid... number. If you decided to add it inside a post or page, please make sure that you don't switch back to the Compose tab and publish your post while you're still on the HTML tab, otherwise the #vid location will be replaced with some other odd Blogger URLs.