由于嵌入的视频太多，我的网站加载缓慢[关闭]答案

【问题标题】：My website loads slow because of too many embedded videos [closed]由于嵌入的视频太多，我的网站加载缓慢[关闭]
【发布时间】：2013-10-27 18:43:46
【问题描述】：

由于嵌入的视频太多，我的网站加载缓慢。我看到有图像的位置（嵌入视频的位置上方），然后单击它，此时会加载嵌入的视频。谁能帮我弄清楚如何做到这一点？也许一旦您将鼠标悬停在加载 youtube 嵌入的图像上？非常感谢！

【问题讨论】：

尽量不要嵌入这么多视频？每页的最大值通常应为一！
您做了哪些研究工作？有很多可用的信息，问题太广泛了
如何嵌入它们？通常它只会在按下播放时开始加载..所以也许是其他原因导致加载缓慢？
你应该显示从视频中提取的缩略图并按需加载每个视频

标签： jquery html css video embedding

【解决方案1】：

用户点击图片后，只需使用jQuery插入嵌入代码即可：

只是示例代码：HTML

<div id="video" style="background-color:red; width:560px; height:315px;"></div>

jQuery:

$('#video').on('click', function() {
    $(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none');
});

如果您希望视频自动播放，请像我一样将?autoplay=1 添加到网址的末尾。

没有缩略图的代码：http://jsfiddle.net/KFcRJ/

提取视频缩略图：

HTML：

<div id="video" style="background-color:red; width:560px; height:315px;">
<a href="http://www.youtube.com/watch?v=9bZkp7q19f0" class="youtube"></a></div>

jQuery:

$('#video').on('click', function() {
$(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background', 'none');
});

function getYoutubeID(url) {
    var id = url.match("[\\?&]v=([^&#]*)");
    id = id[1];
    return id;
};
$('a.youtube').each(function() {
    var id = getYoutubeID( this.href );
    this.id = id;
    var thumb_url = "http://img.youtube.com/vi/"+id+"/maxresdefault.jpg";
    $('<img width="100%" src="'+thumb_url+'" />').appendTo($('#video'));
});

带缩略图的代码：http://jsfiddle.net/89uVe/4/

【讨论】：

附注。autoplay 不适用于 iDevices。
这太完美了！非常感谢！
@Ashkan Mobayen Khiabani 编辑了我的答案以提取缩略图。