javascript - 如何为 YouTube 视频添加启动画面/占位符图像

Question

我有一个包含大量嵌入 YouTube 视频的网站；目前这些是同时加载的，这当然会导致网站在最初加载时运行非常缓慢。

将图像加载为占位符/启动画面而不是视频 iframe 的最佳方法是什么？

仅在单击时才需要将图像替换为 YouTube iframe （仅应在请求时加载），从而大大减少了网站的文件大小。我之前发现了一些类似的问题，但他们似乎建议使用 CSS 和 jQuery 来改变视频的可见性。这在这种情况下不起作用，因为视频播放器仍将在后台加载。

我感谢任何帮助/建议。

Answer 1

它应该很简单，尝试这样的事情：

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">

$('img').click(function(){
    var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);
});

演示：http: //jsfiddle.net/2fAxv/1/

对于 youtube 视频，&autoplay=1如果您希望它们在单击图像时播放，请添加到 URL。