如何为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.