如何为 YouTube 视频添加启动画面/占位符图像 [关闭]

Posted 2023-02-24

【中文标题】如何为 YouTube 视频添加启动画面/占位符图像 [关闭]

【英文标题】：How to add a splash screen/placeholder image for a YouTube video [closed]

【发布时间】：2012-11-23 10:09:51

【问题描述】：

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

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

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

感谢任何帮助/建议。

【参考方案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。

【讨论】：

太棒了，非常感谢。这正是我所需要的。找不到像这样的干净示例。只是出于兴趣，这个问题现在是 -2 是因为它是一个简单的问题还是因为我的措辞有误？

这是因为您没有表现出任何尝试自己解决问题。下一次，发布您尝试过的代码，即使它没有接近工作。此外，“什么是最好的”这句话往往是一个标志。

真正的问题与否，这是我得到的第一个搜索结果，无论如何感谢您的回答。

这也是我得到的第一个结果。也许人们不应该这么快就结束问题。多年来很多很多次，第一个结果，或者最接近我想要的结果，是一个标记为已关闭的问题，但我正在寻找答案。我知道 OP 没有发布任何他尝试过的东西，但这个问题仍然有帮助，并给了我正在寻找的答案。

“也许人们不应该这么快就结束问题。多年来很多很多次第一个结果，或者最接近我想要的结果，是一个标记为已结束的问题” - 对的伙伴，但你不明白吗？守望者需要做点什么。说真的：多么愚蠢。这是一个很好的问题。 “将图像加载为占位符/启动画面而不是视频 iframe 的最佳方式是什么？”