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.
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
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:
1st largest Full size Default thumbnail Image with dimensions 480 x 360 (pixels)
2nd Small thumbnail Image with dimensions 120 x 90 (pixels)
3rd Small Default thumbnail Image with dimensions 120 x 90 (pixels)
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
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.