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

Question

提问by user249493

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 ofthe video.

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

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 behindthe iframe.

然而，在 Chrome 和 IE9 中，在菜单和 iframe 之间的小空间区域中只有一小部分下拉菜单可见。其余部分似乎在 iframe后面。

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

问题似乎与 YouTube 视频有关，而不是iframe。为了测试，我将 iframe 瞄准了另一个网站而不是视频，并且下拉菜单运行良好，即使在 IE 中也是如此。

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

问题1：WTF？
问题2：为什么即使我z-index:-999 !important;在iframe上显式放了a ，还是会出现这个问题？

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

YouTube 嵌入代码中是否有一些内部 CSS 以某种方式覆盖了某些内容？

Answer 1

回答by toomanyairmiles

Try adding wmode, it seems to have two parameters.

试试加wmode，好像有两个参数。

&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">

or this

或这个

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Answer 2

回答by BigHymano

Joshc's answer was on the right track, but I found that it totally deletes the ?rel=0querystring and replaces it with the ?wmode=transparentitem - which has the effect of displaying the YouTube Suggested Videos list at the end of the playback, even though you originally didn't want this to happen.

Joshc的回答是正确的，但我发现它完全删除了?rel=0查询字符串并将其替换为?wmode=transparent项目 - 这具有在播放结束时显示 YouTube 推荐视频列表的效果，即使您最初没有'不希望这发生。

I changed the code so that the srcattribute of the embedded video is scanned first, to see if there is a question mark ?in it already (because this denotes the presence of a pre-existing query string, which mightbe something like ?rel=0but could in theory be anything that YouTube choose to append in the future). If there's a query string already there, we want to preserve it, not destroy it, because it represents a setting chosen by whoever pasted in this YouTube video, and they presumably chose it for a reason!

我更改了代码，以便src首先扫描嵌入视频的属性，以查看其中是否?已经存在问号（因为这表示存在预先存在的查询字符串，这可能类似于?rel=0但理论上可以是 YouTube 将来选择附加的任何内容）。如果那里已经有一个查询字符串，我们希望保留它，而不是销毁它，因为它代表了粘贴到此 YouTube 视频的任何人选择的设置，并且他们可能是出于某种原因选择了它！

So, if ?is found, the wmode=transparentwill be appended using the format: &mode=transparentto just tag it on the end of the pre-existing query string.

因此，如果?找到，wmode=transparent将使用以下格式附加：&mode=transparent将其标记在预先存在的查询字符串的末尾。

If no ?is found, then the code will work in exactly the same way as it did originally (in toomanyairmiles's post), appending just ?wmode=transparentas a new query string to the URL.

如果没有?找到，那么该代码的工作方式将与最初（在toomanyairmiles的帖子中）完全相同，只是?wmode=transparent将一个新的查询字符串附加到 URL 中。

Now, regardless of what may or may not be on the end of the YouTube URL as a query string already, it gets preserved, and the required wmodeparameters get injected or added without damage to what was there before.

现在，无论 YouTube URL 的末尾是否已经作为查询字符串，它都会被保留，并且所需的wmode参数会被注入或添加，而不会损坏之前的内容。

Here's the code to drop into your document.readyfunction:

这是放入您的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"
    });
  }
});

Answer 3

回答by Code.Town

Just add one of these two to the src url:

只需将这两个之一添加到 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>

Answer 4

回答by Joshc

I have the same problem on YouTube iframe embeds only in internet explorer though.

我在 YouTube iframe 上也有同样的问题，但它只嵌入到 Internet Explorer 中。

Z-index was being ignored totally, or the flash video was just appearing at highest index possible.

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

This was what I used, slight adapting the above jquery script.

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

My embed code, straight from YouTube...

我的嵌入代码，直接来自 YouTube...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

The jQuery slighty adapted from the above answer...

jQuery 稍微改编自上述答案...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Basically if you don't select Show suggested videos when the video finishesin your embed settings, you have a ?rel=0at the end of your "src"url. So I've added the replace bit in case ?rel=0exists. Otherwise ?wmode=transparentwon't work.

基本上，如果您在嵌入设置中的视频结束时未选择显示建议的视频，则?rel=0您的"src"网址末尾会有一个。所以我添加了替换位以防万一?rel=0。否则?wmode=transparent将无法工作。

Answer 5

回答by user3410247

We can simply add ?wmode=transparentto the end of YouTube URL. This will tell YouTube to include the video with the wmode set. So you new embed code will look like this:-

我们可以简单地添加?wmode=transparent到 YouTube URL 的末尾。这将告诉 YouTube 包含带有 wmode 集的视频。因此，您的新嵌入代码将如下所示：-

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Answer 6

回答by dragoeco

Only this one worked for me:

只有这个对我有用：

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

I load it in the footer.php Wordpress file. Code found in comment here(thanks Gerson)

我将它加载到footer.php Wordpress 文件中。在此处的评论中找到的代码（感谢 Gerson）

Answer 7

回答by Danny

wmode=opaque or transparent at the beginning of my query string didnt solve anything. This issue for me only occurs on Chrome, and not across even all computers. Just one cpu. It occurs in vimeo embeds as well, and possibly others.

我的查询字符串开头的 wmode=opaque 或 transparent 没有解决任何问题。对我来说，这个问题只发生在 Chrome 上，甚至不会发生在所有计算机上。只有一个cpu。它也出现在 vimeo 嵌入中，也可能出现在其他嵌入中。

My solution to to attach to the 'shown' and 'hidden' event of the bootstrap modals I am using, add a class which sets the iframe to 1x1 pixels, and remove the class when the modal closes. Seems like it works and is simple to implement.

我的解决方案是附加到我正在使用的引导模式的“显示”和“隐藏”事件，添加一个将 iframe 设置为 1x1 像素的类，并在模式关闭时删除该类。看起来它有效并且易于实现。

Answer 8

回答by eduardo

The answers abow didnt really work for me, i had a click event on the wrapper and ie 7,8,9,10 ignored the z-index, so my fix was giving the wrapper a background-color and it all of a sudden worked. Al though it was suppose to be transparent, so i defined the wrapper with the background-color white, and then opacity 0.01, and now it works. I also have the functions above, so it could be a combination.

答案对我来说并没有真正起作用，我在包装器上有一个点击事件，即 7,8,9,10 忽略了 z-index，所以我的修复是给包装器一个背景颜色，它突然起作用了. 虽然它应该是透明的，但我用背景颜色定义了包装器，然后不透明度为 0.01，现在它可以工作了。我也有上面的功能，所以它可以是一个组合。

I dont know why it works, im just happy it does.

我不知道它为什么起作用，我很高兴它起作用了。

Answer 9

回答by cclay

BigHymano's Javascript code worked for me, but in my case I first had to add some JQuery "noconflict" code. Here's the revised version that worked on my site:

BigHymano 的 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>

Answer 10

回答by Sam Thompson

All you need on the iframe is:

您只需要在 iframe 上：

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

and in the URL:

并在网址中：

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

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

提问by user249493

回答by toomanyairmiles

回答by BigHymano

回答by Code.Town

回答by Joshc

回答by user3410247

回答by dragoeco

回答by Danny

回答by eduardo

回答by cclay

回答by Sam Thompson

相关推荐

最近更新

标签

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

提问by user249493

回答by toomanyairmiles

回答by BigHymano

回答by Code.Town

回答by Joshc

回答by user3410247

回答by dragoeco

回答by Danny

回答by eduardo

回答by cclay

回答by Sam Thompson

相关推荐

CSS Chrome 设备模式模拟媒体查询不起作用

结合 CSS 媒体查询

CSS 图标字体未在 IE11 中加载

CSS 如何在引导程序 3 中向下滚动带有固定标题（导航栏）的表格行时将表格标题（thead）粘贴在顶部？

相关推荐

最近更新

标签