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

Question

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

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

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

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

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

Answer 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");
    });
});