How to get a YouTube thumbnail from a YouTube iframe?

Solution 1:

YouTube thumbnails

YouTube thumbnails can be found in this standard path:

http://img.youtube.com/vi/[video-id]/[thumbnail-number].jpg

• [video-id] is the YouTube video ID, e.g. 1sIWez9HAbA.
• [thumbnail-number] is the number of the thumbnail of the 4 each video usually has, e.g. 0.

Getting the thumbnail from an iframe

So, based on the iframe's src attribute you may construct the URL of the thumbnail directly.

For example, using jQuery:

var iframe           = $('iframe:first');
var iframe_src       = iframe.attr('src');
var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

if (youtube_video_id.length == 11) {
    var video_thumbnail = $('<img src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg">');
    $(body).append(video_thumbnail);
}

Note this example checks the URL of the iframe for a valid YouTube video ID and assumes it to be 11 characters long, which is the de facto standard.

See jsFiddle Demo

Solution 2:

Get Youtube thumbnail images using below urls

Low quality

 https://img.youtube.com/vi/[video-id]/sddefault.jpg

medium quality

 https://img.youtube.com/vi/[video-id]/mqdefault.jpg

High quality

http://img.youtube.com/vi/[video-id]/hqdefault.jpg

maximum resolution

http://img.youtube.com/vi/[video-id]/maxresdefault.jpg

example: https://img.youtube.com/vi/OYr-KPboPDw/hqdefault.jpg

Solution 3:

This function work with all types of youtube links & domains such as
https://www.youtube.com/watch?v=WZKW2Hq2fks

https://youtu.be/WZKW2Hq2fks

https://www.youtube.com/embed/WZKW2Hq2fks 

https://youtu.be/WZKW2Hq2fks?t=66

And you can get the quality you want.

To use it:

// quality options: low, medium, high, max | default is max.
var thumbnail = get_youtube_thumbnail('https://youtu.be/WZKW2Hq2fks', 'max');
console.log(thumbnail);

function get_youtube_thumbnail(url, quality){
    if(url){
        var video_id, thumbnail, result;
        if(result = url.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/))
        {
            video_id = result.pop();
        }
        else if(result = url.match(/youtu.be\/(.{11})/))
        {
            video_id = result.pop();
        }

        if(video_id){
            if(typeof quality == "undefined"){
                quality = 'high';
            }
        
            var quality_key = 'maxresdefault'; // Max quality
            if(quality == 'low'){
                quality_key = 'sddefault';
            }else if(quality == 'medium'){
                quality_key = 'mqdefault';
            } else if (quality == 'high') {
                quality_key = 'hqdefault';
            }

            var thumbnail = "http://img.youtube.com/vi/"+video_id+"/"+quality_key+".jpg";
            return thumbnail;
        }
    }
    return false;
}