How to get thumbnail image from youtube embed code

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.