通过iframe嵌入YouTube视频是否忽略z-index？

一尘不染

通过iframe嵌入YouTube视频是否忽略z-index？

css

我正在尝试实现水平多级下拉导航菜单。在菜单的下方（垂直），我通过iframe嵌入了YouTube视频。如果我将鼠标悬停在Firefox中的一级导航上，则下拉菜单会正确显示
在视频顶部。

但是，在Chrome和IE9中，在菜单和iframe之间的一小段空间中，只有一小部分下拉菜单可见。其余的似乎都在 iframe的后面。

问题似乎与YouTube视频有关，而不
与iframe有关。为了进行测试，我将iframe定位于另一个网站而不是视频，并且即使在IE中，下拉菜单也可以正常工作。

问题1：WTF？
问题2：为什么即使我明确地将z-index:-999 !important; iframe 放在iframe上，仍然会出现此问题？

YouTube嵌入代码中是否包含一些内部CSS，以某种方式覆盖了一切？

阅读 340

2020-05-16

共1个答案

一尘不染

尝试添加wmode，它似乎有两个参数。

&wmode=Opaque

&wmode=transparent






<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

或这个

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

2020-05-16