通过iframeembeddedYouTubevideo忽略z-index？
我试图实现一个水平的多级下拉菜单。 在菜单下方（垂直），我有一个通过iframeembedded的YouTubevideo。 如果我将鼠标hover在Firefox中的其中一个主级导航项上，则下拉菜单会正确显示在video顶部 。
然而，在Chrome和IE9中，在菜单和iframe之间的空间很小的区域只能看到下拉的条子。 其余的似乎是在 iframe 后面 。
这个问题似乎与YouTubevideo有关， 而不是 iframe。 为了testing，我的目标是在另一个网站的iframe，而不是video，下拉菜单工作正常，即使在IE浏览器。
- 问题1：WTF？
- 问题2：为什么，即使我明确地把一个
z-index:-999 !important;在iframe上，这个问题是否仍然存在？
是否有一些内置的CSS，YouTubeembedded代码包含了这些东西？
尝试添加wmode，它似乎有两个参数。
&wmode=Opaque &wmode=transparent
我无法find它的工作原理或更多的解释，但看看这个查询的技术原因。
<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"); }); });
Joshc的回答是在正确的轨道上，但是我发现它完全删除了?rel=0查询string，并用?wmode=transparent项来replace它 – 这会在显示YouTube推荐video列表的结尾回放，即使你原本不希望发生这种情况。
我更改了代码，以便首先扫描embeddedvideo的src属性，看是否有问号? （因为这表示存在一个预先存在的查询string， 可能类似于?rel=0但在理论上可能是YouTubeselect在将来追加的任何内容）。 如果有一个查询string已经存在，我们想保留它，而不是销毁它，因为它代表了粘贴在这个YouTubevideo中的任何人所select的设置，并且他们大概select它是有原因的！
那么，如果? 被发现， wmode=transparent将被附加使用格式： &mode=transparent ，只是在预先存在的查询string的末尾标记它。
如果不是? 被发现，那么这个代码的工作方式和原来的一样（在toomanyairmiles的文章中），只是将?wmode=transparent作为一个新的查询string附加到URL中。
现在，无论YouTubeurl的结尾处是否已经包含了查询string，它都会被保留，并且所需的wmode参数被注入或添加，而不会损害之前的内容。
这里是放入你的document.ready函数的代码：
$('iframe').each(function() { var url = $(this).attr("src"); if (url.indexOf("?") > 0) { $(this).attr({ "src" : url + "&wmode=transparent", "wmode" : "opaque" }); } else { $(this).attr({ "src" : url + "?wmode=transparent", "wmode" : "opaque" }); } });
只需将这两个添加到src url：
&wmode=Opaque &wmode=transparent <iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
尽pipe我在YouTube上只有在IE浏览器中embedded相同的问题。
Z-index被完全忽视，或者Flashvideo刚刚出现在可能的最高索引处。
这是我用的，轻微适应上面的jQuery脚本。
我的embedded代码，直接从YouTube …
<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>
jQuery轻微改编自上述答案…
$('iframe').each( function() { var url = $(this).attr("src") $(this).attr({ "src" : url.replace('?rel=0', '')+"?wmode=transparent", "wmode" : "Opaque" }) });
基本上，如果在video在embedded设置中完成时未select显示build议的video，则在"src"url结尾处有一个?rel=0 。 所以我添加了replace位，以防止?rel=0存在。 否则?wmode=transparent将不起作用。
在我的查询string的开始wmode =不透明或透明没有解决任何事情。 这个问题对我来说只在Chrome上发生，而不是在所有的电脑上。 只有一个CPU。 它也出现在vimeoembedded中，也可能是其他的。
我的解决scheme，以附加到我所使用的引导模式的“显示”和“隐藏”事件，添加一个类，将iframe设置为1×1像素，并在模式closures时删除类。 看起来像它的工作，很容易实现。
下面的答案真的没有为我工作，我有一个点击事件的包装，即7,8,9,10忽略了Z – 索引，所以我的修复是给包装背景颜色，它突然间工作。 虽然它是假设是透明的，所以我定义了包装的背景颜色白色，然后不透明度0.01，现在它的工作。 我也有上面的function，所以可能是一个组合。
我不知道为什么它的作品，我只是开心呢。
BigJacko的Javascript代码为我工作，但在我的情况下，我首先必须添加一些JQuery“noconflict”代码。 这是在我的网站上工作的修订版本：
<script type="text/javascript"> var $j = jQuery.noConflict(); jQuery(document).ready(function($j){ $j('iframe').each(function() { var url = $j(this).attr("src"); if ($j(this).attr("src").indexOf("?") > 0) { $j(this).attr({ "src" : url + "&wmode=transparent", "wmode" : "Opaque" }); } else { $j(this).attr({ "src" : url + "?wmode=transparent", "wmode" : "Opaque" }); } }); }); </script>
所有你需要的iframe是：
...wmode="opaque"></iframe>
并在URL中：
http://www.youtube.com/embed/123?wmode=transparent
我们可以简单地将?wmode=transparent添加到YouTubeurl的末尾。 这会告诉YouTube将video添加到wmode中。 所以你新的embedded代码将如下所示：
<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>
只有这个为我工作：
<script type="text/javascript"> var frames = document.getElementsByTagName("iframe"); for (var i = 0; i < frames.length; i++) { src = frames[i].src; if (src.indexOf('embed') != -1) { if (src.indexOf('?') != -1) { frames[i].src += "&wmode=transparent"; } else { frames[i].src += "?wmode=transparent"; } } } </script>
我加载它在footer.php WordPress文件。 代码在这里发表评论（谢谢格森）
