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

Answer 1

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

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

在iFrame中，默认的wmode是带窗口的，从本质上讲，它的z索引大于其他所有索引，并且它将覆盖所有内容。

尝试将此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>