播放前隐藏 YouTube 视频嵌入图像

Posted 2023-05-09

【中文标题】播放前隐藏 YouTube 视频嵌入图像

【英文标题】：Hide YouTube video embed image before playing

【发布时间】：2012-09-24 07:22:32

【问题描述】：

我正在制作一个网站，我想嵌入一个 YouTube 视频。我的前辈讨厌 YouTube 的普通播放器布局，所以我对其进行了一些定制（没有按钮等）。问题是，当我打开网站页面时，YouTube 会显示一张图片（播放器大小，在我的情况下为 480p）并且该图片确实被破坏了。

我需要一些方法来获取 YouTube 嵌入代码并在其上添加图片。当我单击图像时，它应该会更改为 YouTube，然后自动开始播放视频。这样我可以避免人们在打开页面时看到那张难看的预览图。

谢谢。

【问题讨论】：

你看过 jQuery 的 .replaceWith() 函数吗？ api.jquery.com/replaceWith 你可以用它在你的图片上放置一个 div，当它被点击时，用 Youtube 播放器替换内容。

我对 jQuery 了解不多。我唯一得到的是我需要的嵌入代码。你能帮我写吗：x？

看看下面 Pez 的回答。这几乎就是我建议的代码版本。

【参考方案1】：

将带有图像的 div 放在要显示视频的任何位置：

<div id="coverimageforplayer"><img class="introvideo" src="video-cover.jpg"   /></div>

现在，添加以下 jquery 代码：

$('#coverimageforplayer').click(function() 
        var embedCode = '<iframe ...Your Youtube embed code></iframe>';
        $('#coverimageforplayer').html(embedCode);
    );

对我来说就像一个魅力。

【讨论】：

嗨，我已经使用了这个解决方案，但它不适用于 ios Safari，有什么建议吗？

【参考方案2】：

如果视频被隐藏，Youtube 将不会播放它，因此您可以尝试将自动播放设置为一个但隐藏 div，然后您可以使用 jQuery 将您的封面与视频“交换”。视频将加载并自动播放。

使用 jQuery：

<div id="youtubeplayer" style="display:none;">
<!-- Player code with &autoplay=1 -->
</div>
<div id="coverimageforplayer"><img src="wherever.png" /></div>

<script type="text/javascript">
$('#coverimageforplayer').click(function() 
$('#coverimageforplayer').replaceWith($('#youtubeplayer').show());
);
</script>

【讨论】：

无法让它工作。我试图将代码复制到我的 HTML 中，使用 中的嵌入

由于一些奇怪的原因，即使用户没有点击链接，上面提到的代码也会自动播放。我找到了更好的解决方案。立即添加。

这也是一个不错的解决方案：orangecountycustomwebsitedesign.com/…

【参考方案3】：

如果大部分访问者永远不会真正开始播放，我建议您使用一种方法，在页面上只有 img 标记（带有您想要的任何自定义图像），直到有人点击其中一个，此时您换入 YouTube iframe 嵌入式播放器。这样您就可以避免提前加载播放器，除非您知道自己确实需要它。

YouTube Direct Lite 代码库中有一个执行此操作的示例，包括在鼠标悬停时在“播放”图标上叠加。您可以在

查看现场演示

http://ytdirectlite.appspot.com/static-min/submit.html

如果您登录该页面底部的提交界面，然后转到“我的 YouTube 视频”选项卡。

有几段代码可以处理这个问题，但最相关的部分是

https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/load.js#71 https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js#17