Question

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

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

http://www.mensdiscipleshipnetwork.com

感谢您的帮助。

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

Answer 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");
        });
    });

Answer 3

如果您使用 embed ，则wmode必须是属性而不是网址wmode="transparent"

的一部分

Answer 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'
            }
        });

覆盖IE中的CSS下拉菜单的YouTube视频内容＆lt; 9

4 个答案: