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

【问题标题】：Embedded Video creating bugs for position:fixed top header嵌入式视频为位置创建错误：固定顶部标题
【发布时间】：2012-10-03 06:30:37
【问题描述】：

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

position:fixed;
z-index:1000;

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

这个控制台错误与它有什么关系吗？不安全的 JavaScript 尝试从具有 URL ww.youtube... 的框架访问具有 URL ww.youtube... 的框架域、协议和端口必须匹配。

我知道这个描述不是很详细，所以这里是网址：Chronicle Video Section。我正在制作我高中的校报网站，但我被这一问题难住了——以前从未见过。尝试在视频播放时上下滚动。感谢您的帮助。

iframe所在的div是：

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

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

【问题讨论】：

这个问题与嵌入式系统的编程无关。重新标记。
尝试分享视频的css或包含它的div

标签： css youtube-api frame css-position

【解决方案1】：

我发现添加样式规则

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

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

【讨论】：

这只是救了我的命。谢谢。
如果有人能解释这个巫术是如何运作的，那就太好了，否则这也救了我的命。
这太好了，谢谢！知道为什么它在 IE 和 FF 中有效，但在 Chrome 中无效？

【解决方案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.

【讨论】：

【解决方案3】：

这不是 YouTube 错误。这是一个与重绘固定位置项目相关的 webkit 错误。我建议使用 webkit 提交错误。 http://www.webkit.org/quality/reporting.html

如果您现在想要解决问题，我建议您监听窗口滚动事件并更改菜单的样式（宽度、高度或位置）以强制重绘。

【讨论】：

谢谢，我以为我快疯了。最有可能设置位置：绝对解决方法。

【解决方案4】：

这是基于@gregdev 的回答：

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

完整的浏览器支持。

【讨论】：