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

我正在制作一个网站，我想嵌入一个YouTube视频。我的上级讨厌YouTube普通的播放器布局，所以我对它进行了一些定制（没有按钮等）。问题是，当我打开网站页面时，YouTube会显示一个图像（播放器大小，在我的例子中是480p），而该图像实际上被破坏了

我需要一些方法来获取YouTube嵌入代码，并在上面有一个图像。当我点击图像时，它应该会切换到YouTube，然后自动开始播放视频。这样我可以避免人们在打开页面时看到丑陋的预览图像

---

谢谢。

如果视频隐藏，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>

$（“#coverimageforplayer”）。单击（函数（）{
$（“#coverimageforplayer”）.replace为（$（“#youtubeplayer”）.show（）；
});

如果很高比例的访问者不会真正启动播放，我建议使用一种方法，在页面上只添加

img

标记（使用任何自定义图像），直到有人单击其中一个，然后在YouTube iframe嵌入式播放器中进行交换。这样你就可以避免事先加载播放器，除非你知道你真的需要它

在YouTube Direct Lite代码库中有一个这样做的示例，包括当您将鼠标悬停在“播放”图标上时，在其上覆盖一个“播放”图标。您可以在

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

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

---

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

将带有图像的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);
    });

$（'coverimageforplayer'）。单击（函数（）{
var-embedCode=''；
$（'coverimageforplayer'）.html（嵌入代码）；
});

---

这对我来说很有吸引力。

您看过jQuery的.replaceWith（）函数吗？你可以用它在图像中放置一个div，点击后用Youtube播放器替换内容。我唯一得到的是我需要的嵌入代码。你能帮我写一下吗：x？看看下面佩兹的答案。这几乎是我建议的代码版本。无法让它工作。我曾尝试将代码复制到我的HTML中，在中使用嵌入代码，为封面定义了一个图像，但我点击了很多次，什么都没有发生。出于一些奇怪的原因，即使用户没有点击链接，上述代码也会自动播放。我找到了更好的解决办法。现在添加它。这里还有一个很好的解决方案：嗨，我用过这个解决方案，但它在iOS Safari上不起作用，有什么建议吗？