播放前隐藏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不会播放隐藏的视频，因此您可以尝试将自动播放设置为1，但隐藏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>

Answer 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#71https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/player.js#17