如何为 YouTube 视频添加启动画面/占位符图像 [英] How to add a splash screen/placeholder image for a YouTube video

问题描述

我有一个网站，其中包含许多嵌入的 YouTube 视频；目前这些是同时加载的，这当然会导致网站在最初加载时运行速度极慢.

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.

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

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

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

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.

感谢任何帮助/建议.

推荐答案

应该很简单，试试这样的:

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

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

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

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

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