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 视频 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);
}

请注意，此示例检查 iframe 的 URL 以获取有效的 YouTube 视频 ID，并假定其长度为 11 个字符，这是事实上的标准。

参见jsFiddle Demo