0

Hi there I have a youtube video embedded inside the site however when I click in a button to get the overlay, the overlay goes behind the youtube video. This happens only in Firefox 14, it works fine everywhere else... I have tried to put wmode="transparent/opaque" but it does not work with either one or the other...

Overlay box code:

.box_4, .box_5, .box_6 {
  position: fixed;
  top: -1900px;
  left: 50%;
  z-index: 101;
  width: 883px;
  margin-left: -400px;
  }
Aessandro
  • 5,517
  • 21
  • 66
  • 139

3 Answers3

2

The issue is when you embed a youtube link:

https://www.youtube.com/embed/kRvL6K8SEgY in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.

Try appending this GET parameter to your URL:

wmode=opaque

like so:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Make sure its the first parameter in the URL. Other parameters must go after

In the iframe tag:

Example:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

see: overlay opaque div over youtube iframe

Community
  • 1
  • 1
mindspins
  • 78
  • 1
  • 6
1

Try with position: absolute - 

.box_4, .box_5, .box_6 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
  width: 883px;
  margin-left: 0px;
  }
Dipak
  • 11,930
  • 1
  • 30
  • 31
0

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

try this param, it should fix it.

Greetings and good luck…

philipp
  • 15,947
  • 15
  • 61
  • 106