sometime we need to extract the thumbnail
image of YouTube video embed code. When you copy the embed code for YouTube
video, it contains the Id of the video.
There is a very simple way to retrieve your YouTube thumbnail images for a
specific video. Just go to the following URL:
http://i1.ytimg.com/vi/<insert-YouTube -video-id-here>/[Thumnail-Size].jpg.
Or you can use:
http://img.youtube.com/vi/<insert-youtube-video-id-here>/[Thumnail-Size].jpg
Now, you will need to fetch the videoId of either from the video Url or from the
embed code of YouTube video. Then replace [Video-Id] with your YouTube video ID.
After that you will need to set the thumbnail image number according to your
need (0,1,2 etc). This thumbnail number describe the image size you will get.
Now, you need to get the Video-Id from the embed code of YouTube Video.
Here, is the JavaScript function that will extracts the YouTube VideoId using a
Regular Expression.
Suppose your iframe is like this..
<iframe width="560" height="315" src="http://www.youtube.com/embed/SQEbPn36m1c"
frameborder="0" allowfullscreen class="youtubeiframe"></iframe>
Here, is the JavaScript Code.
script
type="text/javascript">
$(document).ready(function () {
var youtubeid =
$(".youtubeimg").attr("src").match(/[\w\-]{11,}/)[0];
alert(youtubeid);
});
});
</script>
The above function will gives videoid of
YouTube image.
Now, you need to pass the YouTube VideoId to the above URL and you will receive
the video thumbnail Image for that YouTube Video easily.