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

User · Answer

Only this one worked for me    lt script type  text javascript  gt  var frames   document getElementsByTagName  iframe        for  var i   0  i  lt  frames length  i              src   frames i  src          if  src indexOf  embed      -1            if  src indexOf         -1                frames i  src      amp wmode transparent             else               frames i  src      wmode transparent                      lt  script gt    I load it in the footer php Wordpress file  Code found in comment here   thanks Gerson

User · Answer

Try adding wmode  it seems to have two parameters    amp wmode Opaque   amp wmode transparent   I can t find a technical reason why it works  or much more explanation but take at look at this query    lt iframe title  YouTube video player  width  480  height  390  src  http   www youtube com embed lzQgAR J1PI wmode transparent  frameborder  0  wmode  Opaque  gt    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

User · Answer

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   amp 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       gt  0          this  attr          src    url     amp wmode transparent          wmode     opaque                else         this  attr          src    url     wmode transparent          wmode     opaque

User · Answer

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 -   lt iframe width  420  height  315  src  http   www youtube com embed C4I84Gy-cPI wmode transparent  frameborder  0  allowfullscreen gt

User · Answer

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

User · Answer

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

User · Answer

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    lt script type  text javascript  gt  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       gt  0             j this  attr              src    url     amp wmode transparent              wmode     Opaque                            else            j this  attr              src    url     wmode transparent               wmode     Opaque                                  lt  script gt

User · Answer

Just add one of these two to the src url    amp wmode Opaque   amp wmode transparent   lt iframe id  videoIframe  width  500  height  281  src  http   www youtube com embed xxxxxx rel 0 amp wmode transparent  frameborder  0  allowfullscreen gt  lt  iframe gt

User · Answer

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      lt iframe width  560  height  315  src  http   www youtube com embed QldZiR9eQ 0 rel 0  frameborder  0  allowfullscreen gt  lt  iframe gt      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

User · Answer

All you need on the iframe is      wmode  opaque  gt  lt  iframe gt    and in the URL   http   www youtube com embed 123 wmode transparent

[css] YouTube Video Embedded via iframe Ignoring z-index?

Examples related to css

Examples related to iframe

Examples related to youtube