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

我正在尝试实现一个水平多级下拉式导航菜单。在菜单的下方(垂直) ，我有一个通过 iframe 嵌入的 YouTube 视频。如果我将鼠标悬停在 Firefox 的一个主要级别导航项上，下拉菜单就会正确地显示视频的 在。

然而，在 Chrome 和 IE9中，在菜单和 iframe 之间的一小块空间中，只能看到一小块下拉菜单。剩下的似乎是 后面的 iframe。

这个问题似乎与 YouTube 视频有关，没有 The iframe。为了测试，我把 iframe 对准了另一个网站而不是视频，下拉菜单工作得很好，甚至在 IE 中也是如此。

  • 问题1: 卧槽？
  • 问题2: 为什么，即使我明确地把 z-index:-999 !important; 在 iframe 上这个问题还会发生吗？

是否有一些内部的 CSS，YouTube 嵌入代码包括，以某种方式覆盖的东西？

105798 次浏览
小开
最佳答案

尝试添加 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");
});
});
小开

我在 YouTube 上遇到了同样的问题 iframe 只嵌入了 Internet Explorer。

Z-index 被完全忽略，或者 Flash 视频只是出现在最高的索引可能。

这就是我所使用的，略微调整了上面的 jquery 脚本。

我的嵌入代码，直接从 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"
})
});


基本上，如果在嵌入设置中没有选择 视频完成后播放建议的视频，那么在 "src" URL 的末尾就有一个 ?rel=0。所以我添加了替换位，以防 ?rel=0存在。否则 ?wmode=transparent不起作用。


小开

Joshc 的回答是正确的，但是我发现它完全删除了 ?rel=0查询字符串，并将其替换为 ?wmode=transparent条目——这会在播放结束时显示 YouTube 推荐视频列表，即使你最初并不希望发生这种情况。

我修改了代码，首先扫描嵌入视频的 src属性，看看是否已经有一个问号 ?(因为这表示存在一个预先存在的查询字符串，也许吧类似于 ?rel=0，但理论上可能是 YouTube 将来选择添加的任何内容)。如果有一个查询字符串已经在那里，我们希望保留它，而不是摧毁它，因为它代表了一个设置所选择的人粘贴在这个 YouTube 视频，他们选择它可能是有原因的！

因此，如果找到了 ?，那么将使用格式 &mode=transparent将 wmode=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 网址上添加这两个中的一个:

&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>
小开

在我的查询字符串开头的 wmode = 晦涩或透明并没有解决任何问题。对我来说，这个问题只会出现在 Chrome 上，甚至不会出现在所有的电脑上。只有一个 CPU。它也出现在 Vimeo 嵌入中，也可能出现在其他嵌入中。

我的解决方案，附加到’显示’和’隐藏’事件的引导模态我使用，添加一个类，设置 iframe 为1x1像素，并删除类时，模态关闭。看起来很有效，而且很容易实现。

小开

下面的答案对我不起作用，我有一个包装上的点击事件，即7,8,9,10忽略了 z 索引，所以我的修复是给包装一个背景色，它突然起作用了。虽然它应该是透明的，所以我定义的包装与背景色白色，然后不透明度0.01，现在它的工作。我也有上面的函数，所以它可以是一个组合。

我不知道为什么它的工作，我只是高兴它做。

小开

BigJacko 的 Javascript 代码对我很有用，但是在我的例子中，我首先需要添加一些 JQuery“非冲突”代码。下面是我网站上的修订版:

<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>
小开

你只需要知道:

...wmode="opaque"></iframe>

网址:

http://www.youtube.com/embed/123?wmode=transparent
小开

我们可以简单地将 ?wmode=transparent添加到 YouTube URL 的末尾。这将告诉 YouTube 包括视频与 wmode 设置。因此，新的嵌入代码将如下所示:-

<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 文件中，代码在注释 给你中找到(感谢 Gerson)


提交答案