强制在 iframe 顶部固定导航栏？答案

【问题标题】：Force fixed nav bar on top of iframe?强制在 iframe 顶部固定导航栏？
【发布时间】：2012-05-20 05:42:42
【问题描述】：

我将导航固定在页面顶部，但如果在其上滚动嵌入 iframe 的 youtube 视频，它会显示在导航顶部（以及任何覆盖或模态窗口 div）。

尝试设置z-index，无济于事。

我发现您可以在嵌入对象上设置 wmode="opaque" 以使其与旧式 Flash 嵌入一起使用，但我更喜欢使用 HTML 5 而不必要求特定设置视频嵌入

http://jsfiddle.net/EB6gN/9/

【问题讨论】：

标签： css iframe youtube embed css-position

【解决方案1】：

正确的答案是将 wmode=opaque 设置为您的 iframe src 值的 YouTube 查询字符串。

iframe 没有属性不透明。允许的属性的完整列表如下： http://www.w3schools.com/tags/tag_iframe.asp

更新后的 jsfiddle 仅包含 HTML5 API 嵌入 YouTube 方法，省略了旧式嵌入类型和您不想要的 z-index。
http://jsfiddle.net/EB6gN/16/

如果您在视频上单击播放时看到黑屏，这是因为当前存在 YouTube HTML5 Flash Fallback 错误。一旦 iframe 尺寸变大，您将看到控件，但播放器已损坏。请参考此 SO 帖子以获取该信息：
https://stackoverflow.com/a/10560802/1195891

【讨论】：

【解决方案2】：

JSFiddle

您需要将帧的 wmode 设置为不透明或透明。您还需要将该参数添加到 iframe 中的 youtube 视频中。

更多关于wmode。

编辑：将所有内容设置为不透明works just fine, in Chrome at least。

【讨论】：