Overlap an Iframe using a DIV doesn't seem to work on Firefox

Question

Can i overlap an iframe using a div so it is not clickable?

This is what i have (and doesn't work in Firefox)

Here is the HTML code:

<div class="container">
  <div class="do-not-allow-click"></div>
  <div class="iframe-container">
    <iframe width="420" height="315" src="//www.youtube.com/embed/T4-PSYiYUzQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

And these are the CSS rules:

.container {
  position: absolute;
  top: 0;
  left: 0;
  height: 315px;
  width: 420px;
}

.do-not-allow-click {
  cursor: move;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9999;
}

.iframe-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

Which version of firefox are you referring to? It looks fine to me in 27.0.1 — Josh Rutherford, Apr 08 '14 at 22:20

score 1 · Accepted Answer · edited May 23 '17 at 12:28

When you embed a youtube link in an iFrame, the default wmode is windowed which apply a z-index greater then everything else and get overlay at the top.

To solve this append wmode=opaque to the source URL like this

http://www.youtube.com/embed/T4-PSYiYUzQ?wmode=opaque

So your iframe code will be as below

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

Check this: overlay opaque div over youtube iframe

Overlap an Iframe using a DIV doesn't seem to work on Firefox

1 Answers1