我的网站包含大量嵌入式YouTube视频;目前这些都是同时加载的,这当然会导致网站在最初加载时运行速度极慢。
将图片作为占位符/启动画面而不是视频iframe加载的最佳方法是什么?
只有在点击时才需要用YouTube iframe替换(这应该只在请求时加载),从而大大减少了网站的文件大小。我之前发现了一些类似的问题,但他们似乎建议使用CSS和jQuery来改变视频的可见性。这在这种情况下不起作用,因为视频播放器仍将在后台加载。
我感谢任何帮助/建议。
答案 0 :(得分:40)
应该非常直接,尝试这样的事情:
<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
添加到网址。