javascript - YouTube iframe から YouTube サムネイルを取得するには?

Question

たとえば、次のようなブログ投稿がありますiframe。

<iframe width="420" height="315" src="//www.youtube.com/embed/1sIWez9HAbA" frameborder="0" allowfullscreen></iframe>

これからサムネイルを抽出するにはどうすればよいiframeですか?

Answer 1

YouTube のサムネイル

YouTube のサムネイルは、次の標準パスにあります。

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

• [video-id]は YouTube 動画 ID1sIWez9HAbAです。
• [thumbnail-number]は、各動画が通常持つ 4 つのサムネイルの数です0。

iframe からサムネイルを取得する

iframeしたがって、の属性に基づいてsrc、サムネイルの URL を直接構築できます。

たとえば、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);
}

この例では、 の URL でiframe有効な YouTube 動画 ID をチェックし、デファクト スタンダードである 11 文字の長さと想定していることに注意してください。

jsFiddle デモを見る

Answer 2

この機能は、
https://www.youtube.com/watch?v= WZKW2Hq2fks などのすべてのタイプの YouTube リンクとドメインで機能します。

https://youtu.be/WZKW2Hq2fks

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

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

そして、あなたはあなたが望む品質を得ることができます。

使用するには:

// 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;
}