在youtube iframe上覆盖不透明div

如何在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">向该对象添加a ，因为它现在是iFrame，因此我该如何在其顶部添加不透明的div iframe嵌入式视频？

来自Adobe官方网站的有关此问题的信息

问题是当您嵌入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>

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

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

不

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

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

在Chrome中渲染效果良好。您是否需要跨浏览器？确实有助于具体化。

编辑：的Youtube呈现object，并embed没有明确的wmode集，这意味着它默认为“窗口”，这意味着它覆盖一切。您需要：

a）自己托管包含对象/嵌入代码的页面，如果选择同时服务对象和属性，则将wmode =“ transparent” param元素添加到对象和属性以进行嵌入

b）为youtube找到一种方法来指定这些内容。

我花了一天的时间弄乱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的前面。

不透明的覆盖物是否出于美学目的？

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

#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'将改变叠加行为，因此它在物理上可能是不透明的。当然，这仅适用于良好的浏览器。