Monday, April 18, 2011

YouTube video Thumbnails - iframe API


Each YouTube video is associated with four images, listed as follows: 

   http://img.youtube.com/vi/youtube-video-id/0.jpg
   http://img.youtube.com/vi/youtube-video-id/1.jpg
   http://img.youtube.com/vi/youtube-video-id/2.jpg
   http://img.youtube.com/vi/youtube-video-id/3.jpg

The first one is a full size image and others are thumbnail images.


Here the youtube-video-id is 'JW5meKfy3fY', to get the thumbnails we can use the following urls:


YouTube video thumbnail generation using JavaScript

 function getThumbnail( yUrl, imageSize ){
 if( yUrl === null ){ 
   return ""; 
  }

 imageSize = (imageSize === null) ? 0 : imageSize;
 
 var vId;
 var results;
 
//getting video id using regular expression

 results = yUrl.match("[\\?&]v=([^&#]*)");
 vId =  results[1];

 if(imageSize == 0 ){
  // small image
return "http://img.youtube.com/vi/"+vId+"/2.jpg";
 }else {
  // large image 
return "http://img.youtube.com/vi/"+vId+"/0.jpg";
 }
 }


Note: This post is for my reference only.