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

Question

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

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

谢谢。

Answer 1

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

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

现在，添加以下 jquery 代码：

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

对我来说就像一个魅力。

Answer 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>