YouTube 视频嵌入和 z-index 问题

使用多级下拉导航菜单下方的 iframe 嵌入 YouTube 视频时，您可能会遇到Chrome 和 Internet Explorer 中下拉菜单出现在视频后面的问题。将鼠标悬停在主导航项上时，下拉菜单应出现在所有浏览器中的视频顶部。

问题 1：为什么下拉菜单出现在 Chrome 和 IE9 中的 YouTube 视频后面？

这个问题与YouTube视频本身有关，与iframe无关。 YouTube 嵌入包含覆盖其他 CSS 设置的内部 CSS，包括您的 z-index 值。

问题 2：为什么设置 z-index:-999 !很重要； iframe 上的 仍然会导致问题？

YouTube 嵌入代码中的覆盖 CSS 优先于您应用于 iframe 的任何 z 索引设置。

解决方案：

要解决此问题，请将以下参数添加到嵌入视频的URL:

&wmode=Opaque

此设置允许视频融入背景，允许页面上的其他元素显示在其上方。

附加说明：

• 您还可以使用参数 wmode=transparent 代替 Opaque，尽管这可能会导致透明度问题
• 或者，您可以使用 jQuery 在加载页面上的所有 iframe 之前修改其 URL，如下面的代码片段所示：

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url "?wmode=transparent");
    });
});