如何使iframe在IE中得到尊重?

I have a youtube iframe element in my website, but it's next to my menu items. When I hover over a menu item, a submenu opens that partially covers the iframe (because of it's position, that's not it's specific function obviously). This works fine in Firefox, but as usual, it doesn't in IE, here the iframe covers the menu, making it basically unreadable. Is there an option I need to add to the iframe to make it work or is it just plain impossible?

我的网站上有一个youtube iframe元素，但它就在我的菜单项旁边。当我将鼠标悬停在菜单项上时，会打开一个包含iframe的子菜单(因为它的位置，显然不是它的特定功能)。这在Firefox中很好用，但是像往常一样，它不在IE中，在这里iframe覆盖了菜单，使它基本上无法读取。是否有一个选项我需要添加到iframe以使其正常工作，或者仅仅是不可能?

(Testing with IE9 at the moment)

(目前IE9测试)

4 个解决方案

#1

Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)

尝试使用youtube iframe嵌入方法(如果这不是您已经在做的，并且添加:?wmode=透明到url(替换?)如果它不是第一个url变量)

#2

There are several issues with this question. First of all, there is no problem in IE to set an iframe above or below other content in your document using z-index. Higher z-index makes your iframe above other elements, (as usual), as far as your iframe is positioned: relative, absolute or fixed.

这个问题有几个问题。首先，在您的文档中使用z索引设置一个iframe或以下其他内容是没有问题的。更高的z索引使你的iframe高于其他元素，(如往常一样)，只要你的iframe被定位:相对的，绝对的或固定的。

The real problem comes when the content of your iframe is a flash embedded object. In this case, the flash object can only be z-positioned if its wmode parameter is set to "transparent" or "opaque", but it will not work if the flash is included in the HTML document using wmode = "window".

真正的问题是当你的iframe的内容是一个flash嵌入式对象时。在这种情况下，如果将wmode参数设置为“透明”或“不透明”，那么flash对象只能是z定位，但是如果flash在HTML文档中使用wmode =“窗口”，那么它就不起作用了。

So if you are including an external resource (in a website you don't have access, like youtube), you can only achieve it if any of those modes are used. If you are loading a flash object in a iframe in which you can modify its content, just check that:

因此，如果你包括一个外部资源(在一个你没有访问的网站，比如youtube)，你只能在使用这些模式的情况下实现它。如果你在一个iframe中加载一个flash对象，你可以修改它的内容，只要检查一下:

<param name="wmode" value="transparent" />

is set.

是集。

In case youtube is using "window" mode, you can always use your own flash player and hook youtube videos dynamically, setting your flash object mode to transparent.

如果youtube使用“窗口”模式，你可以随时使用你自己的flash播放器，动态地挂起youtube视频，将你的flash对象模式设置为透明。

#3

I saw the similar issue, the default youtube link word should be embed,

我看到了类似的问题，默认的youtube链接词应该嵌入，

<iframe src="http://www.youtube.com/embed/video_id"></iframe>

but not just v-link (v-link ignores z-index):

但不只是v-link (v-link忽略z指数):

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe>

Here is an example for IE: http://jsfiddle.net/7fd8Y/21/

这里有一个关于IE的示例:http://jsfiddle.net/7fd8Y/21/。

#4

Here is a non pure JS solution, alternative to JQuery:

这里有一个非纯JS解决方案，可以替代JQuery:

var iFramesOnPage = document.getElementsByTagName("IFRAME");
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL);
};

#1