Display YouTube Video Thumbnails in Blogger

We have reached the stage of our Blogger JSON tutorial series where we will learn how to extract thumbnails from a YouTube video and display these featured thumbnails inside BlogSpot blogs recent posts widget. YouTube Data API is an excellent way to create 3rd party applications for users that could help them to search for YouTube videos, upload videos to YouTube, and update existing videos. It also helps you to retrieve playlists, favorite videos, and do much more. Since discussing YouTube API is beyond the scope of this tutorial therefore we will only discuss the thumbnails which are stored inside the tags <media:thumbnail/>. Understanding YouTube Video Feed is not our concern for this tutorial series. In this part we will first discuss the Thumbnail basic URL structure and will learn different techniques of embedding these thumbnails inside blog posts but in our next tutorial we will discuss how to dynamically show featured YouTube thumbnails inside the recent comments widget via JSON feed by retrieving the Thumbnail from the YouTube Iframe.

Note: Click the Button below to see full list of topics under discussion.

Topics List

Extract Thumbnails from a YouTube Video

Every YouTube Thumbnail has the following URL structure:

http://img.youtube.com/vi/VIDEO ID/IMAGE NUMBER.jpg

• There are a total of 4 thumbnails available through YouTube API for each video. Each image is numbered in this sequence: 0, 1, 2, 3. Represented by IMAGE NUMBER
• Each video has its unique ID represented by VIDEO ID.

I once uploaded a Facebook Timeline video to my YouTube channel. This video is located at

https://www.youtube.com/watch?v=tcw10SeE_VQ

Where  tcw10SeE_VQ is the video ID. This is the exact same URL structure for all videos on YouTube.

YouTube Data API stores around 4 thumbnails for each video. 3 small and one large. The thumbnails stored for the above video are located at:

http://img.youtube.com/vi/tcw10SeE_VQ/0.jpg

1st largest Full size Default thumbnail Image with dimensions 480 x 360 (pixels)

http://img.youtube.com/vi/tcw10SeE_VQ/1.jpg

2nd Small thumbnail Image with dimensions 120 x 90 (pixels)

 

http://img.youtube.com/vi/tcw10SeE_VQ/2.jpg

3rd Small Default thumbnail Image with dimensions 120 x 90 (pixels)

http://img.youtube.com/vi/tcw10SeE_VQ/3.jpg

4rth Small thumbnail Image with dimensions 120 x 90 (pixels)

Embedding YouTube Thumbnails in Blog posts

Now lets suppose you want to publish a video post and you want to display the thumbnail Image of your YouTube video as the featured Image of your blog post in a SEO friendly manner. For this all you need to do is to use the following image code:

<img src=http://img.youtube.com/vi/VIDEO ID/0.jpg  width="400px" alt="Image Description"/>

• You just need to replace VIDEO ID with the ID of your YouTube video URL
• Note that I have selected the 1st Thumbnail image (i.e. 0.jpg) to display the largest thumbnail.
• You can customize the width of your image by simply editing 400px. Note that the 1st thumbnail has a width of 480px.
• Replace "Image Description" with Image Title

Display Thumbnails Dynamically

For simplicity we have only discussed the static method of embedding thumbnail images in blog posts but in our next tutorial we will discuss a JavaScript technique to extract YouTube Video Images dynamically from the blogger JSON feed and will display Video thumbnails automatically next to each post containing a video Iframe.

At present we are only sharing the technique for YouTube videos but if you guys would love to know how to extract Dailymotion or Vimeo video Thumbnails thumbnails also then let me know so that I may share those scripts with all of you.

Stay tuned for the next part which involves some interesting yet easy JavaScript programming. Peace and blessing buddies! :)