html - 在 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>