--> Display YouTube Video Thumbnails in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

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

Extract YouTube Video ThumbnailsWe 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)

Full size YouTube Thumbnail

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

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

 

Small YouTube Thumbnail

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

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

Default YouTube Thumbnail

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

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

Small YouTube Thumbnail

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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Display YouTube Video Thumbnails in Blogger
Display YouTube Video Thumbnails in Blogger
http://lh3.googleusercontent.com/-5RjgKzDOZrI/VkxdpJgjtwI/AAAAAAAAPzE/e_EAi9vmZZ8/image%25255B8%25255D.png?imgmax=800
http://lh3.googleusercontent.com/-5RjgKzDOZrI/VkxdpJgjtwI/AAAAAAAAPzE/e_EAi9vmZZ8/s72-c/image%25255B8%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2015/11/display-youtube-video-thumbnails-in.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2015/11/display-youtube-video-thumbnails-in.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy