YouTube在图像点击后自动加载 - Chrome / Opera

Question

我有一个代码，可以在点击图像后启动YouTube视频。问题是，那个歌剧，铬等。在单击之前启动图像后面的视频。火狐工作正常。

这是我的代码：

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
    <img style="cursor: pointer; margin-left: 89px;" src="./img/style/new/slider/XXXXXX.png" alt="" />
</div>
<div id="thevideo" style="display: none;">
    <iframe width="604" height="266" src="//www.youtube.com/embed/XXXXXXXX?rel=0&autohide=2&showinfo=0&controls=0&modestbranding=0&wmode=transparent&showsearch=0&version=3&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

你能帮我提供更好的代码吗？其他视频结束后是否可以再次显示图像？

提前致谢

编辑：推送

Answer 1

如果在用户单击图像时将 iframe 代码粘贴到 #thevideo 怎么办？我认为您可以使用jQuery中的.append（）函数来做到这一点。

Answer 2

铬/歌剧...浏览器问题是一个已知问题。您可以更改一些浏览器设置，使其不会自动播放视频，因为您实际上只是在视频上蒙版。请参阅这篇文章： 停止 youtube 自动播放

编辑：要使用编程方法处理它，请执行以下操作：将 YouTube 网址中的自动播放值更改为"自动播放=0"。向 iframe 添加 id 值，例如 id="iframe"。然后将以下代码行添加到图像的单击函数中：document.getElementById（'iframe'）.src = document.getElementById（'iframe'）.src.replace（'autoplay=0'，'autoplay=1'）;

这也可以在以下位置看到： Youtube 叠加图像 Div - 在下面自动播放

Answer 3

见上文：

编辑：要使用程序化方法进行处理：将YouTube网址中的自动播放值更改为"autoplay= 0"。向 iframe 添加 id 值，例如 id="iframe"。然后将以下代码行添加到图像的单击函数中：document.getElementById（'iframe'）.src = document.getElementById（'iframe'）.src.replace（'autoplay=0'，'autoplay=1'）;

这也可以在以下位置看到： Youtube 叠加图像 Div - 在下面自动播放

我用过它，效果很好！