web-dev-qa-db-ja.com

YouTube iframeからYouTubeサムネイルを取得する方法は？

たとえば、次のiframeを含むブログ投稿があります。

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

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

javascriptjqueryiframeyoutube
31
Mohammed Hâmzã

YouTubeサムネイル

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

http://img.youtube.com/vi/[video-id]/[thumbnail-number].jpg
  • [video-id]はYouTube動画IDです。例： 1sIWez9HAbA。
  • [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);
}

この例では、有効なYouTube動画IDのiframeのURLを確認し、事実上の標準である11文字の長さであると想定しています。

jsFiddle Demo を参照してください

88
Boaz

ここからデフォルトの表示画像を取得します

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

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

3
Gopala raja naika