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
Feel free to contact me for any help related to jQuery, I will gladly help you.