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 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
.
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 display
featured YouTube thumbnails
inside the recent comments
widget via JSON feed by
retrieving the Thumbnail from
the YouTube Iframe.


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:

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