通过 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;在 iframe 上还会出现这个问题吗?

• Question 1: WTF?
• Question 2: Why, even if I explicity put a z-index:-999 !important; on the iframe does this problem still occur?

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

我找不到它起作用的技术原因，或者更多解释，但是 看看这个查询.

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屋！