在YouTube iframe上覆盖不透明div

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (64)

我如何在Youtube上覆盖半透明的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;
}

编辑(增加更多澄清):HTML 5正在接近我们,越来越多的设备使用它而不是flash,这使得youtube视频的嵌入变得更加复杂,值得庆幸的是,youtube提供了一个特殊的可嵌入iframe,它处理了所有视频嵌入兼容性问题,但是现在,用半透明div覆盖视频对象的工作方法已经不再有效,我现在无法添加一个可嵌入的iframe。<param name="wmode" value="transparent">对于对象,因为它现在是一个iframe,那么如何在iframe嵌入式视频的顶部添加一个不透明的div呢?

提问于
用户回答回答于

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

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

在iframe中,默认的wmode是加窗的。

尝试将这个GET参数附加到您的URL中:

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

扫码关注云+社区

领取腾讯云代金券