YouTube Video Embedded via iframe Ignoring z-index?

Question

I'm trying to implement a horizontal multilevel dropdown navigation menu. Immediately below (vertically) the menu, I've got a YouTube video embedded via iframe. If I hover over one of the main level nav items in Firefox, the dropdown menu properly appears on top of the video.

In Chrome and IE9, however, only a sliver of the dropdown is visible in the small region of space I have between the menu and the iframe. The rest of it seems to be behind the iframe.

The problem seems to be related to the YouTube video, not the iframe. To test, I aimed the iframe at another web site rather than the video, and the dropdown menu worked fine, even in IE.

Question 1: WTF?
Question 2: Why, even if I explicity put a z-index:-999 !important; on the iframe does this problem still occur?

Is there some internal CSS that the YouTube embed code includes that is somehow overriding things?

Can you post a link - it's difficult to give a helpful response without code. — toomanyairmiles, Jan 30 '12 at 21:59
possible duplicate of [z-index and iFrames!](http://stackoverflow.com/questions/5281002/z-index-and-iframes) — stephanfriedrich, Oct 23 '14 at 13:31
possible duplicate of [YouTube video content covering CSS drop down menus in IE < 9](http://stackoverflow.com/questions/7747133/youtube-video-content-covering-css-drop-down-menus-in-ie-9) — Sampson, Dec 05 '14 at 00:55
for anyone wondering how this works in 2015, the `` section is all you need (at least in firefox) and no need to worry about setting wmode in `url`'s `param`'s or `iframe`s — RozzA, Feb 18 '15 at 13:34
keep in mind that for some reason there are two different types of youtube links: http://www.youtube.com/v/video_id and http://www.youtube.com/embed/video_id. The v-link ignores z-index in IE, but embed works fine. — Anton Lyhin, Jan 12 '16 at 19:57
+1 for a beautifully written question; It is difficult to find users -writers, even- with this quality of conciseness. — Danny Mahoney, Mar 30 '16 at 00:22
Theoretically, putting a `z-index:-999 !important` on the iFrame does not make sense as it **contains** the content that you are trying to hierarchically separate it from; for this reason it will not differentiate. — Danny Mahoney, Mar 30 '16 at 00:45

score 244 · Accepted Answer · edited Dec 09 '13 at 13:21

244

Try adding wmode, it seems to have two parameters.

&wmode=Opaque

&wmode=transparent

I can't find a technical reason why it works, or much more explanation but take at look at this query.

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

or this

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

edited Dec 09 '13 at 13:21

ArturBalestro

135
10

answered Jan 30 '12 at 23:11

toomanyairmiles

6,465
8
43
71

6

(I'm the OP) Thanks everyone! I stumbled upon a similar solution at http://manisheriar.com/blog/flash_objects_and_z_index The key seems to be using both name="wmode" value="transparent" on a *and* wmode="transparent" on the . As I suspected, it's not an iframe issue. It seems to be an issue with Flash wanting (demanding?) the highest z-index unless you force it to be transparent. – user249493 Jan 31 '12 at 01:26
5

If you're using the iframe JS API a playerVar `wmode` also works although it's not documented. – Richard M Jul 26 '12 at 10:55
1

I have integrated this and my fancybox stil doesnt work in ie7/8 and I still get the video on top. http://www.encompasscu.com.au/homeiswheretheheartis what can I do – Dan Feb 27 '13 at 04:32
6

The ?wmode=transparent option worked like a charm for me. I only wish I was faster at finding the right question to ask. 24 hours after I started looking I found this answer. Thanks for answering and posting the query above as well! – djmarquette Mar 06 '13 at 18:53
Not able to see video when i click on Play only sound is coming but video is not visible, but while i do full screen video is able to visible on android PHONE GAP – SRam Apr 08 '13 at 10:15
1

@Dan, see my edit... you might already have a query string in your youtube embed code. (like ?rel=0 to not show relevant videos). If that's the case use &wmode=transparent (or opaque - I've heard opaque uses less system resources, so I use that mainly, unless I have a reason to make it transparent). – Sean Kendle Jul 24 '13 at 21:19
1

what works for me is: `.........?rel=0&wmode=transparent` and `wmode="transparent"` – Francisco Corrales Morales Mar 28 '14 at 22:26
1

Good point. I implemented this fix amongst several sites and it corrected the issue. Is there any documentation on why this is needed with IE ? – Ryan Watts Jul 18 '14 at 19:51
I had an issue with the embedded youtube video via iframe was overlapping my fixed navigation bar, no matter what z-indexes I added. The wmode attribute on the iframe and url parameter worked a charm! Thanks! – BarberCraig Sep 10 '15 at 09:40
I tried the above and the document onload didn't work for me, but Richard M's comment above did. – jwsadler Oct 13 '15 at 18:11
Also add `position: relative;` to container what need to cover your video. That help a lot. – Ivijan Stefan Stipić Oct 30 '15 at 17:21

score 29 · Answer 2 · edited Oct 30 '15 at 10:45

Joshc's answer was on the right track, but I found that it totally deletes the ?rel=0 querystring and replaces it with the ?wmode=transparent item - which has the effect of displaying the YouTube Suggested Videos list at the end of the playback, even though you originally didn't want this to happen.

I changed the code so that the src attribute of the embedded video is scanned first, to see if there is a question mark ? in it already (because this denotes the presence of a pre-existing query string, which might be something like ?rel=0 but could in theory be anything that YouTube choose to append in the future). If there's a query string already there, we want to preserve it, not destroy it, because it represents a setting chosen by whoever pasted in this YouTube video, and they presumably chose it for a reason!

So, if ? is found, the wmode=transparent will be appended using the format: &mode=transparent to just tag it on the end of the pre-existing query string.

If no ? is found, then the code will work in exactly the same way as it did originally (in toomanyairmiles's post), appending just ?wmode=transparent as a new query string to the URL.

Now, regardless of what may or may not be on the end of the YouTube URL as a query string already, it gets preserved, and the required wmode parameters get injected or added without damage to what was there before.

Here's the code to drop into your document.ready function:

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

This worked for me whereas the accepted answer didn't (even after fixing the code). Thanks for the drop-in fix. — Tom, Apr 16 '13 at 17:14
? starts the parameter query string, & is the delimiter. Basic stuff. See http://stackoverflow.com/questions/2667551/add-parameter-to-links-on-page-using-jquery — cdonner, Sep 06 '13 at 19:48

score 6 · Answer 3 · answered Feb 07 '13 at 00:11

6

Just add one of these two to the src url:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

answered Feb 07 '13 at 00:11

Code.Town

1,216
10
16

score 5 · Answer 4 · edited Mar 30 '16 at 01:13

I have the same problem on YouTube iframe embeds only in internet explorer though.

Z-index was being ignored totally, or the flash video was just appearing at highest index possible.

This was what I used, slight adapting the above jquery script.

My embed code, straight from YouTube...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

The jQuery slighty adapted from the above answer...

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

Basically if you don't select Show suggested videos when the video finishes in your embed settings, you have a ?rel=0 at the end of your "src" url. So I've added the replace bit in case ?rel=0 exists. Otherwise ?wmode=transparent won't work.

score 2 · Answer 5 · edited Mar 12 '14 at 11:07

2

We can simply add ?wmode=transparent to the end of YouTube URL. This will tell YouTube to include the video with the wmode set. So you new embed code will look like this:-

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

edited Mar 12 '14 at 11:07

DroidDev

1,527
4
20
42

answered Mar 12 '14 at 10:48

user3410247

37
1

2

This was already suggested in many answers here no need to repeat it with yet another answer. If you have something new to add please do, otherwise please don't just repeat what others already posted. – Shadow The GPT Wizard Mar 12 '14 at 13:15

score 2 · Answer 6 · answered Feb 25 '15 at 11:18

Only this one worked for me:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

I load it in the footer.php Wordpress file. Code found in comment here (thanks Gerson)

score 1 · Answer 7 · answered Sep 24 '13 at 19:33

wmode=opaque or transparent at the beginning of my query string didnt solve anything. This issue for me only occurs on Chrome, and not across even all computers. Just one cpu. It occurs in vimeo embeds as well, and possibly others.

My solution to to attach to the 'shown' and 'hidden' event of the bootstrap modals I am using, add a class which sets the iframe to 1x1 pixels, and remove the class when the modal closes. Seems like it works and is simple to implement.

score 1 · Answer 8 · answered Oct 01 '13 at 12:19

The answers abow didnt really work for me, i had a click event on the wrapper and ie 7,8,9,10 ignored the z-index, so my fix was giving the wrapper a background-color and it all of a sudden worked. Al though it was suppose to be transparent, so i defined the wrapper with the background-color white, and then opacity 0.01, and now it works. I also have the functions above, so it could be a combination.

I dont know why it works, im just happy it does.

score 1 · Answer 9 · answered Oct 09 '13 at 19:21

BigJacko's Javascript code worked for me, but in my case I first had to add some JQuery "noconflict" code. Here's the revised version that worked on my site:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

score 1 · Answer 10 · answered Feb 12 '14 at 10:29

1

All you need on the iframe is:

...wmode="opaque"></iframe>

and in the URL:

http://www.youtube.com/embed/123?wmode=transparent

answered Feb 12 '14 at 10:29

Sam T

1,033
1
9
17

YouTube Video Embedded via iframe Ignoring z-index?

10 Answers10

Linked

Related