在 youtube iframe 上覆盖不透明的 div

Question

如何在 youtube iframe 嵌入视频上覆盖具有半透明不透明度的 div？

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

编辑（添加更多说明）： HTML5 正在接近我们，越来越多的设备使用它而不是 flash，这使 youtube 视频的嵌入变得复杂，幸好 youtube 提供了一个特殊的可嵌入 iFrame 来处理所有视频嵌入的兼容性问题，但现在覆盖了以前的工作方法具有半透明 div 的视频对象不再有效，我现在无法向对象添加 <param name="wmode" value="transparent">，因为它现在是 iFrame，那么如何在 iframe 嵌入视频的顶部添加不透明 div ?

Answer 1

Information from the Official Adobe site about this issue

问题是当您嵌入 youtube 链接时：

https://www.youtube.com/embed/kRvL6K8SEgY

在 iFrame 中，默认的 wmode 是窗口化的，这实际上赋予它的 z-index 大于其他所有内容，并且它将覆盖任何内容。

尝试将此 GET 参数附加到您的 URL：

wmode=不透明

像这样：

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

确保它是 URL 中的第一个参数。其他参数必须放在后面

在 iframe 标记中：

例子：

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Answer 2

请注意，wmode=transparent 修复仅在第一次如此时才有效

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

不是

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Answer 3

嗯……这次有什么不同？ http://jsfiddle.net/fdsaP/2/

在 Chrome 中呈现良好。你需要跨浏览器吗？这确实有助于具体化。

编辑：Youtube 渲染 object 和 embed 没有明确设置 wmode，这意味着它默认为“窗口”，这意味着它覆盖了所有内容。您需要：

a) 自己托管包含对象/嵌入代码的页面，如果您选择同时提供这两个元素，则将 wmode="transparent" 参数元素添加到要嵌入的对象和属性中

b) 找到一种方法让 youtube 指定这些内容。

Answer 4

在找到 anataliocs 技巧之前，我花了一天时间弄乱 CSS。将wmode=transparent 作为参数添加到 YouTube URL：

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

这允许 iframe 继承其容器的 z-index，因此您的不透明 <div> 将位于 iframe 前面。

Answer 5

不透明的覆盖是为了美观吗？

如果是这样，您可以使用：

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events: none' 将改变覆盖行为，使其在物理上不透明。当然，这只适用于好的浏览器。