图片点击后 youtube 自动加载 - Chrome/Opera答案

【问题标题】：youtube autoload after image click - Chrome/Opera图片点击后 youtube 自动加载 - Chrome/Opera
【发布时间】：2013-09-17 08:47:11
【问题描述】：

我有一个代码，可以在单击图像后启动 youtubevideo。问题是，Opera、Chrome 等。在单击之前启动图像后面的视频。 Firefox 运行良好。

这是我的代码：

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

你能帮我写一个更好的代码吗？另外，视频结束后是否可以再次显示图像？

提前致谢

编辑：推

【问题讨论】：

标签： google-chrome youtube embed opera

【解决方案1】：

如果在用户点击图片时将 iframe 代码粘贴到#thevideo 会怎样？我认为你可以使用 jQuery 中的 .append() 函数来做到这一点。

【讨论】：

.append() 在视频结束后重新显示图像？修复 chrome/opera 问题的代码是什么？

【解决方案2】：

chrome/opera...浏览器问题是一个已知问题。您可以更改浏览器设置，使其不会自动播放视频，因为您实际上只是在视频上放置了一个遮罩。见这篇文章：Stop youtube autoplay

编辑：用编程方法处理它：将 youtube 网址中的自动播放值更改为“autoplay=0”。向您的 iframe 添加一个 id 值，例如 id="iframe"。然后将以下代码行添加到图像的点击函数中： document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1' );

这也可以在：Youtube Overlay Image Div - Autoplay Underneath 看到

【讨论】：

是的，但我不希望我的所有网站访问者都必须更改浏览器设置才能正确使用我的网站，你知道吗？没有机会从网站上修复它吗？

【解决方案3】：

见上图：

编辑：使用编程方法处理它：将 youtube url 中的自动播放值更改为“autoplay=0”。向您的 iframe 添加一个 id 值，例如 id="iframe"。然后将以下代码行添加到图像的点击函数中： document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1' );

这也可以在以下位置看到：Youtube Overlay Image Div - Autoplay Underneath

我用过，效果很好！

【讨论】：