如何为YouTube视频添加启动屏幕/占位符图片

问题描述

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

将图片加载为占位符/ splash的最佳方法是什么

图片需要由YouTube iframe替换请求），从而大大减少了网站的文件大小。我之前发现了一些类似的问题，但他们似乎建议使用CSS和jQuery来改变视频的可见性。在此情况下无法播放，因为视频播放器仍会在后台加载。

感谢您的任何帮助/建议。

 <$ c $ 
 c>< img src =placeholder.jpgdata-video =http://www.youtube.com/embed/zP_D_YKnwi0> 
  

  $ '）.click（function（）{
 var video ='< iframe src ='+ $（this）.attr（'data-video'）+'>< / iframe& 
 $（this）.replaceWith（video）; 
}）; 
  

演示：

对于YouTube视频，请添加& autoplay = 1 到该网址，如果您希望他们在图片被点击时播放。

I have a website that includes a lot of embedded YouTube videos; currently these are loaded simultaneously which, of course, causes the site to run extremely slowly when initially loaded.

What is the best way to load an image as a placeholder/splash screen instead of the video iframe?

The image will need to be replaced by the YouTube iframe only when clicked (this should only be loaded when requested), thus reducing the file size of the website dramatically. I have found some similar questions before but they seem to recommend using CSS and jQuery to alter the visibility of the video. This doesn't work in this instance because the video player will still load in the background.

I appreciate any help/suggestions.

解决方案

It should be pretty straight forward, try something like this:

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

Demo: http://jsfiddle.net/2fAxv/1/

For youtube videos, add &autoplay=1 to the URL if you want them to play when the image is clicked.

这篇关于如何为YouTube视频添加启动屏幕/占位符图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！