嵌入式视频为位置创建错误:固定顶部标题

Question

我在带有的页面顶部有一个菜单元素

position:fixed;
z-index:1000;

它通常会停留在页面的顶部，没有任何抱怨。然而，每当我在页面中嵌入youtube视频(当时也必须在播放)时，固定菜单似乎都会出现各种故障和跳转。这是一个常见的问题，嵌入式视频干扰位置：固定元素？这个问题出现在Chrome、Safari中，但奇怪的是，Firefox中没有。

这个控制台错误与此有关吗？不安全的JavaScript尝试从URL为ww.youtube的帧访问URL为ww.youtube…的帧域、协议和端口必须匹配。

我知道这个描述不是很详细，所以这里是网址：编年史视频部分。我正在制作我高中的校报网站，我在这一期上被难住了——以前从未见过。在播放视频时尝试上下滚动。谢谢你的帮助。

iframe所在的div是：

<div class="entry-content">
<p>
<iframe... />
</p>
</div>

如果它有帮助的话，我设置它的方式是，它目前提取wordpress帖子内容的入口内容，这只是youtube的url，wordpress将url转换为嵌入到该div中。

Answer 1

我发现添加样式规则

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

固定元素为我整理了疯狂。

Answer 2

我遇到了完全相同的问题，我找到了一个非常简单的解决方案。添加以下参数：

?wmode=transparent

到youtube视频url。例如：

<iframe width="560" height="315" src="http://www.youtube.com/embed/brg1H4BuII8?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

更多详细信息请点击此处。

Answer 3

这不是YouTube的bug。这是一个与重绘固定位置项目有关的webkit错误。我建议用webkit来归档这个bug。http://www.webkit.org/quality/reporting.html

如果你现在想要一个解决方案，我建议你听窗口滚动事件，并更改菜单的样式(宽度、高度或位置)以强制重新绘制。

Answer 4

这是基于@gregdev的回答：

backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;  
transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);

获得完整的浏览器支持。