在youtube iframe上覆盖不透明div

Information from the Official Adobe site about this issue

问题是当你嵌入youtube链接时:

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

在iFrame中,默认的wmode是窗口化的,这实际上给了它一个z索引,它比其他任何东西都大,它将覆盖任何东西。

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>

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

不是

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

隐马尔可夫模型。。。这次有什么不同? http://jsfiddle.net/fdsaP/2/

在铬精细渲染。你需要跨浏览器吗?具体点确实有帮助。

:Youtube呈现 object 和 embed 没有显式的wmode集,这意味着它默认为“window”,这意味着它覆盖了 一切 . 您需要:

b) 想办法让youtube指定这些。

wmode=transparent 作为YouTube URL的参数:

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

这允许iframe继承其容器的z索引,因此 <div>

不透明覆盖层是否出于美观目的?

如果是,您可以使用:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

“指针事件:无”将更改覆盖行为,使其在物理上不透明。当然,这只适用于好的浏览器。