Embedding Youtube Videos in Video Blogger Templates with Auto Thumbnail Display


What I shared here on my blog are mostly Video Blogger Templates. If your fun of vlogging, sharing your personal videos or doing some movie reviews then Video Blogger Templates is what you need.

In using Video Blogger Templates, the most important thing to know is how to embed your videos on your post. One of the most famous video sharing site, of course, is Youtube.

For Youtube, the most basic thing to embed videos in simply copy the embed code below of any Youtube videos you want.


Below is an example of Youtube embed code
<iframe width="560" height="315" src="https://www.youtube.com/embed/ bAKyknYgQrw" frameborder="0" allowfullscreen></iframe>

Explaining Auto Thumbnail

Notice the embed code given above, it's a simple iframe when you use it on your blogger post, Yes it will definitely give your audience a playable video. But what was lacking is when using that code in your Video Blogger Templates, this will not provide you an AUTOMATIC THUMBNAIL giving you a "NO IMAGE OR NO PREVIEW" seeing on your homepage. Alternatively is you need to add an image in your post that will extract as a thumbnail.

Youtube Thumbnail

I had mentioned above that adding image in your blogger post will extract the thumbnail, that will show on your homepage instead of seeing "NO IMAGE".

Now what we need to understand is how to extract Thumbnails from a Youtube video. There are actually four (4) thumbnails available through Youtube API for each video.

This is the URL structure of Youtube Thumbnail.
http://img.youtube.com/vi/VIDEO ID/IMAGE NUMBER.jpg
Note that each Youtube video thumbnail has its unique ID represented by VIDEO ID and an IMAGE NUMBER.


For Video ID: Video URL below found here: Youtube Channel
Where bAKyknYgQrw is the VIDEO ID.


YouTube Data API stores around 4 thumbnails for each video. Three (3) small and one (1) large. The thumbnails stored for the above video are located at, see example below:

1st largest Full size Default thumbnail Image with zero (0) IMAGE NUMBER.

Youtube Thumbnail

2nd Small thumbnail Image with One (1) IMAGE NUMBER.

Youtube Thumbnail

3rd Small default thumbnail Image with Two (2) IMAGE NUMBER.

Youtube Thumbnail

4th Small thumbnail Image with Three (3) IMAGE NUMBER.

Youtube Thumbnail

Embedding Thumbnail on Blog Post

In embedding Thumbnail on you Blogger Posts, supposed let say your question is, aside from the given 4 number of image thumbnails from Youtube API can I add a custom size for my Thumbnail?

The answer is YES. Simply add the width of your liking.

See example below:
<img src=http://img.youtube.com/vi/VIDEO ID/0.jpg  width="300px"/>
Again VIDEO ID is the ID of your YouTube video URL and change the width depends already on your own choice.

Preview for custom 300px IMAGE size.

So that's it. Using and understanding how to extract Youtube thumbnail will give you now an idea on how to embed Youtube videos that will extract an auto thumbnail for your Video Blogger Templates.

Watch out for my next Tutorial. I will be writing about how to embed Youtube Videos responsively without anymore using the Standard "iframe" Youtube embed code.

Have a nice day everyone!
Learn more »

The Reviewer (Video Blogger Template)

Reviewer Blogger Template is a super professional theme. The Reviewer blogger template is designed for movie promotion, presentation of projects, films, images, events and much more. This theme supports YouTube videos and you cane easily make your desired changes in this theme. This is very easy to customize. Created every element as a widget so you can easily put it almost anywhere. This template is universal so it can be used for any site.

Template name : The Reviewer
Platform: Blogger / Blogspot
Author :  Soratemplates

Learn more »

Detube Video Blogger Template

DeTube is an elegant and unique blogger templates design for video blog. It has a unique video container at homepage and easy to use templates.

Template name : DeTube
Platform: Blogger / Blogspot
Author :  Bloggertheme9

Learn more »

PopCorn Video Blogger Template

Template Feature: Blue, Gallery, Movie, 4 Columns Footer, Page Navigation Menu, Video, Breadcrumb Navigation Ready, Minimalist, Games, Slideshow, 2 Columns, Clean, Ads Ready, Seo Ready, Magazine, Free Premium, Post Thumbnails, Responsive, Drop Down Menu, Right Sidebar, 1 Right Sidebar.

Template name : PopCorn Blogger Template
Platform: Blogger / Blogspot
Author :  Soratemplates
Designer: Soratemplates

POPCorn Video Blogger Template      
Learn more »

VideoTube Responsive Blogger Template

VideoTube is a sensational new and modern template for the blogger platform. It has cutting edge and robust design layout while not compromising speed, effectiveness or functionality. It is perfect for all video related blogs that want to showcase a set of videos in a beautiful way. It supports video thumbnails from Vimeo and Youtube. Everything is carefully thought out including multiple free widgets.

Template name : VideoTube
Platform: Blogger / Blogspot
Author :  Sora Templates
Designer: Sora Templates

Learn more »

Youtube Responsive Blogger Templates

Youtube Responsive Blogger Templates is a simple and responsive blogger template for video bloggers. This vlog template supports 3 famous video hosting sites. Youtube, Vimeo and Dailymotion. It will automatically generate thumbnail images and show in Home Page and Archive pages of your blog..

Template name : Youtube Responsive Blogger Templates
Platform: Blogger / Blogspot
Author :  Duy Templates
Designer: bloggersviet.blogspot.com
Instruction how to post video: Read the instructions in notepad..

Youtube Blogger Templates    
Learn more »

VideoBox Blogger Templates

VideoBox is a very professional video gallery blogger themes with great feature like wooden design and gray color for basic design this themes, ads space widget at top right sidebar, professional video gallery blogger themes and 4 columns layout, drop down menu for main navigation, 1 right sidebar, auto thumbnail post at homepage, 4 column widget at footer, ads space ready, fast themes on browser and you must try this themes for music or video sites.
Image and video hosting by TinyPic      

Template name : VideoBox
Platform: Blogger / Blogspot
Release date : November 2012
Author :  www.soratemplates.com
Installation Guide: Click Here 

Learn more »

BloggerTube Version 4

After series of version came out for Blogger Tube template. Here is the version 4 of it. This is template from bloggertube which was created by Dante.

Template name : BloggerTube V4
Platform: Blogger / Blogspot
Author :  Dante Araujo


For videos from, Dailymotion, metacafe, vimeo, LiveLeak, add the endofvid tag to the end of the link. 
For the video description: place the text inside this code [starttext] and [endtext]. 

 Example: http://www.youtube.com/watch?v=xxxxxxxendofvid [starttext] all text here [endtext] 

Learn more »

Johny Joss Banget - Blogger Template

Johny Joss Banget video template is designed for gallery content blogger especially for movie review. It's a black color with 5 column blogger in there, easy loading with elegant looks, automatic slider Carousel for your recent post, 1 right sidebar, 3 columns footer, navigation drop down menu, grid and list style, pagination for blogger ready, clean design template, and more.

Template name : Johny Joss Banget 
Platform: Blogger / Blogspot
Release date : November 2012 
Author :  Maskolis  
Installation Guide: Click Here
upcoming movies reviews/    
Learn more »

Sora Movies - Video Blogger Template

Sora Movies is a unique Entertainment Blogger Template which is suitable for any type of Cinema, Movie Promotion, Theatres, Blogs and Movie Communities no matter the size. Sora Movies has banner areas, so it allows you to show ads and earn money without making damage to your website overall look.

Template name : Sora Movies
Platform: Blogger / Blogspot
Author :  Soratemplates.com
Designer: Soratemplates.com

Learn more »