Learning jQuery

In this post, find jQuery code to fetch thumbnail of youtube video. This is very helpful when you are embedding any youtube video to your webpage. Youtube provides an API which can be used to fetch the thumbnail image of the video and not lot of people are aware about this. For the demo purpose, we will be using the most popular video on Youtube "PSY - GANGNAM STYLE".

Infact, below image that you see is also fetched directly from YouTube. It's a first frame of the video.

Okay.. Enough talking.. Let's get to the point. So the YouTube API URL is,
"http://img.youtube.com/vi/".

But few parameters along with this URL are also compulsory. One is ofcourse, VideoID and second is Image size.

• VideoID: You can easily get from any video. For example, the "PSY - GANGNAM STYLE", video URL on YouTube is "http://www.youtube.com/watch?v=9bZkp7q19f0". So the Video ID is "9bZkp7q19f0".
• Image Size: You can either fetch a large image or small image. So to fetch large image pass "0", otherwise "1".

So the complete URL will look like,

http://img.youtube.com/vi/9bZkp7q19f0/0.jpg

You can specify 1, 2 or 3.jpg to fetch small thumbnail. So the URLs works as source of image so it can be directly assigned to src attribute of the image.

$("#LThumb").attr("src", "http://img.youtube.com/vi/9bZkp7q19f0/0.jpg");
$("#SThumb").attr("src", "http://img.youtube.com/vi/9bZkp7q19f0/1.jpg");

See result below

Feel free to contact me for any help related to jQuery, I will gladly help you.