Question

我的网站上嵌入了YouTube视频。视频未启动（尽管无关紧要）。

我可以通过设置它的父div显示来隐藏它：none样式以显示其中的另一个内容。喜欢改变

<div>
<iframe width="640" height="480" frameborder="0"
allowfullscreen src="http://www.youtube.com/embed/xxxxxxxx">
</iframe>
</div>
<div style='display:none;'>
another content
</div>

到

<div style='display:none;'>
<iframe width="640" height="480" frameborder="0"
allowfullscreen src="http://www.youtube.com/embed/xxxxxxxx">
</iframe>
</div>
<div>
another content
</div>

在Explorer / Firefox中它运行正常。在Chrome中，它大部分都可以使用，但在某些机器上（我试过约20％的铬）视频确实隐藏了，但是当我将鼠标移到它的位置（显示另一个内容）时，视频图像的方块在内容覆盖处闪烁它

我尝试将视频移到左侧除了隐藏它（style ='display：none; left：-9999px;'）但它没有帮助，视频在同一个地方闪烁但在Firebug中和Chrome DevTools我可以看到应用了-9999px样式。

在Chrome中发生这种情况的机器上总是会发生（并且在同一台机器上它在IE / FF中运行良好）。 Chrome版本是最新的（它自动更新），目前是27。

你会建议什么？

Answer 1

修复方法是将？wmode = opaque 添加到youtube链接。代码

<div style='display:none;'>
<iframe width="640" height="480" frameborder="0"
allowfullscreen src="http://www.youtube.com/embed/xxxxxxxx/?wmode=opaque">
</iframe>
</div>
<div>
another content
</div>

将视频正确隐藏在以前无效的那些色彩中。

隐藏图层上的视频显示在chrome中

1 个答案: