如何在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>
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)
编辑(添加更多说明):
HTML5正在逼近我们,越来越多的设备使用它而不是闪存,这使得youtube视频的嵌入变得复杂,幸好youtube提供了一个特殊的可嵌入iFrame,可以处理所有视频嵌入兼容性问题,但是现在以前使用半透明div覆盖视频对象的方法不再有效,我现在无法添加<param name="wmode" value="transparent">
到对象,因为它现在是iFrame,所以如何在顶部添加不透明的div iframe嵌入式视频?