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

Question

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

position:fixed;
z-index:1000;

它通常位于页面顶部，没有任何抱怨。但是，每当我在页面中有一个youtube嵌入式视频（当时也必须播放）时，固定菜单会出现各种故障并跳转。这是一个常见的问题，嵌入式视频干扰位置：固定元素？问题出在Chrome浏览器，Safari，但奇怪的是，不是在Firefox中。

此控制台错误是否与此有关？ 不安全的JavaScript尝试使用URL ww.youtube来访问具有URL ww.youtube的框架...域，协议和端口必须匹配。

我知道这个描述不是很精细，所以这里是url：Chronicle Video Section。我正在上高中的学校报纸网站，我对这个问题感到难过 - 以前从未见过。在视频播放时尝试上下滚动。谢谢你的帮助。

iframe所在的div是：

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

如果它有帮助，我如何设置它是当前拉出wordpress帖子内容的条目内容，这只是youtube网址，Wordpress将网址转换为嵌入到该div中。

Answer 1

我发现添加了样式规则

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

到固定元素为我解开了疯狂。

Answer 2

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

?wmode=transparent

到youtube视频网址。例如：

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

更多详情here。

Answer 3

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

如果你现在想要一个解决方法，我建议你听一下窗口滚动事件并改变菜单的样式（宽度，高度或位置）来强制重绘。