Z-index issues with iframe in IE

Question

IE seems to ignore elements with higher z-indexes, when they overlap an iframe.

Have read various other posts that suggest adding a combination of &wmode=transparent to the iframe src, and wmode="opaque" attribute to the iframe itself; though IE doesn't seem to like either of these.

<iframe title="YouTube video player" class="media-youtube-html5" type="text/html" width="500" height="300" src="http://www.youtube.com/v/9W82sMSMJJg?hd=1&wmode=transparent" wmode="opaque" frameborder="0"></iframe>

http://jsfiddle.net/7fd8Y/

Any help would be much appreciated.

What about if there is no z-index applied at all [like in this fiddle](http://jsfiddle.net/7fd8Y/4/). Is the badge over the `iframe` in IE? — misterManSam, Jul 10 '14 at 12:21
possible duplicate of [YouTube Video Embedded via iframe Ignoring z-index?](http://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index) — Huangism, Jul 10 '14 at 12:53

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

I have updated your code. Now working fine in IE, just added the wmode parameter through javascript jsfiddle

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

Refer This post

edited May 23 '17 at 11:52

Community

1
1

answered Jul 10 '14 at 12:51

karan3112

1,867
14
20

The original code had some errors which are resolved in the updated code. – karan3112 Jul 10 '14 at 12:59

score 0 · Answer 2 · answered Jan 12 '16 at 19:49

Your link is wrong, the default link word should be embed,

<iframe src="http://www.youtube.com/embed/9W82sMSMJJg" frameborder="0"></iframe>

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

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

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

Z-index issues with iframe in IE

2 Answers2