jQuery code to fetch thumbnail of youtube video

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,

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

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

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..