YouTube 视频内容涵盖 IE < 9 中的 CSS 下拉菜单答案

【问题标题】：YouTube video content covering CSS drop down menus in IE < 9YouTube 视频内容涵盖 IE < 9 中的 CSS 下拉菜单
【发布时间】：2011-12-06 12:33:06
【问题描述】：

我使用 CSS 创建了下拉菜单，并且在导航栏下方的框中放置了一个 YouTube 视频。使用 IE 8 时，下拉菜单落后于 YouTube 视频，尽管带有导航栏的 div 的 z-index 高于带有 YouTube 视频的 div。在 Firefox、Safari 或 IE9 中不存在此问题。

您可以通过访问网站查看问题：

http://www.mensdiscipleshipnetwork.com

感谢您的帮助。

【问题讨论】：

标签： css youtube

【解决方案1】：

您似乎需要将 ?wmode=transparent 添加到 YouTube 嵌入 iframe src 网址。像这样：

<iframe width="632" height="390" src="http://www.youtube.com/embed/_K-YwgCyg70?wmode=transparent" frameborder="0" allowfullscreen></iframe>

【讨论】：

这不起作用。我收到“发生错误。请稍后再试。”留言
网址必须是http://www.youtube.com/embed/_K-YwgCyg70?wmode=transparent。 @sdleihssirhc：供将来参考。
谢谢！这解决了我的问题。非常感谢对新手的帮助。
谢谢！我想知道为什么某些 IE11 用户会出现此问题，但并非所有人都会出现此问题。我注意到的唯一区别是受影响的用户在 Windows 7 上运行 IE11。Windows 8 用户没有这个问题。

【解决方案2】：

您可以像这样将该参数自动添加到所有 iframe src：

$(document).ready(function()
    {
        $('iframe').each(function()
        {
               var url = $(this).attr("src");
                var char = "?";
              if(url.indexOf("?") != -1)
                      var char = "&";

                $(this).attr("src",url+char+"wmode=transparent");
        });
    });

【讨论】：

谢谢！这解决了我的问题。
小心 - 当您只需要定位 YouTube iframe 时，这将修改您网页上的所有 iframe。您应该在那里定位 src url 包括 youtube 域。

【解决方案3】：

如果您使用 embed，wmode 需要是一个属性而不是 URL wmode="transparent"的一部分

【讨论】：

【解决方案4】：

如果您使用 iframe API，您可以像这样添加它（注意 playerVars 对象中的最后一个参数）：

player = new YT.Player(playerID,
        {
            width: '100%',
            height: '100%',
            videoId: vidID,
            playerVars: {
                controls: 2,
                autohide: 1,
                showinfo: 0,
                modestbranding: 1,
                wmode: 'transparent'
            }
        });

【讨论】：