通过iframe嵌入的YouTube视频忽略z
我正在尝试实现水平多级下拉菜单。 紧接着（垂直）菜单下方，我有一个通过iframe嵌入的YouTube视频。 如果我将鼠标悬停在Firefox中的其中一个主级导航项上，则下拉菜单会正确显示在视频顶部。
然而，在Chrome和IE9中，在菜单和iframe之间的小空间区域中只能看到下拉的一条条。 其余的似乎是iframe的后面。
这个问题似乎与YouTube视频有关，而不是iframe。 为了测试，我将iframe对准了另一个网站，而不是视频，即使在IE中，下拉菜单也能正常工作。
z-index:-999 !important; 在iframe上这个问题是否仍然存在？ YouTube嵌入代码包含的某些内部CSS是否在某种程度上压倒了事物？
尝试添加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");
});
});
Joshc的回答是正确的，但我发现它完全删除了?rel=0查询字符串，并用?wmode=transparent项来替换它 - 它在播放结束时显示YouTube推荐视频列表，即使你原本不希望发生这种情况。
我更改了代码，以便首先扫描嵌入视频的src属性，以查看是否有问号? （因为这表示存在一个预先存在的查询字符串，可能类似于?rel=0但理论上可能是YouTube选择在将来添加的任何内容）。 如果已经存在查询字符串，我们希望保留它，而不是将其摧毁，因为它代表粘贴此YouTube视频的用户选择的设置，并且他们大概选择它是有原因的！
那么，如果? wmode=transparent将使用以下格式追加： &mode=transparent以便将其标记在预先存在的查询字符串的末尾。
如果不是? 被发现，那么代码的工作方式与原来的方式完全相同（在toomanyairmiles的文章中），将?wmode=transparent作为新的查询字符串附加到URL。
现在，无论YouTube URL的末尾是否已经存在查询字符串，它都会保留下来，并且所需的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>