通过iframe嵌入的YouTube视频忽略z-index？ [英] YouTube Video Embedded via iframe Ignoring z-index?

问题描述

我试图实现一个水平多级下拉导航菜单。立即在下方（垂直）菜单，我有一个通过iframe嵌入的YouTube视频。如果我将鼠标悬停在Firefox中的某个主级导航项目上，则下拉菜单会正确显示在视频之上。

I'm trying to implement a horizontal multilevel dropdown navigation menu. Immediately below (vertically) the menu, I've got a YouTube video embedded via iframe. If I hover over one of the main level nav items in Firefox, the dropdown menu properly appears on top of the video.

但是，在Chrome和IE9中，在菜单和iframe之间的空白区域中只能看到一个下拉菜单。其余的似乎是在后面的iframe。

In Chrome and IE9, however, only a sliver of the dropdown is visible in the small region of space I have between the menu and the iframe. The rest of it seems to be behind the iframe.

问题似乎与YouTube视频相关，不是 iframe。为了测试，我将iframe定位在另一个网站而不是视频，下拉菜单工作正常，即使在IE。

The problem seems to be related to the YouTube video, not the iframe. To test, I aimed the iframe at another web site rather than the video, and the dropdown menu worked fine, even in IE.

• 问题1：WTF？


• 问题2：为什么，即使我显式地放置了 z-index：-999！important;
  on iframe这个问题仍然会发生吗？

YouTube嵌入代码包含的某些内部CSS

Is there some internal CSS that the YouTube embed code includes that is somehow overriding things?

推荐答案

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

Try adding wmode, it seems to have two parameters.

&wmode=Opaque

&wmode=transparent

$ b b

我找不到其工作原理的技术原因，或者更多解释，但。

I can't find a technical reason why it works, or much more explanation but take at look at this query.

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

这篇关于通过iframe嵌入的YouTube视频忽略z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！