1

I have a YouTube video embedded in my site (in an iframe) and I also have a menu that is triggered by jquery to pop up over the page. This works fine in Chrome, but in FireFox the iframe appears over the top of the menu.

I tried setting the iframes z-index to less then the pop up boxes, eg:

iframe {
position: absolute;
z-index: 10;
}

#popup {
position: absolute;
z-index: 99;
}

but that didnt change anything - the iframe still appears over the pop up box.

Would anyone know a way to deal with this?

MeltingDog
  • 14,310
  • 43
  • 165
  • 295

1 Answers1

2

Try adding wmode, it seems to have two parameters.

&wmode=Opaque
&wmode=transparent

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

For more info check

YouTube Video Embedded via iframe Ignoring z-index?

Community
  • 1
  • 1
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59