如何在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嵌入式视频?
<param name="wmode" value="transparent">
问题是当您嵌入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>