Cross-browser absolute positioned div over iframe?

Question

I have an embedded iframe YouTube video on my page and a CSS drop down that I need to have overlaying it. I've ran into problems in both IE10 and Firefox 20.

In IE10, the drop down appears behind the video. It doesn't seem to respect z-index.

In FF20, the drop downs appear on top, but CSS3 corners clipped and show a notch instead. CSS3 shadows also don't appear. I assume they are behind the iframe. Below is my CSS and I created a jsbin you can checkout at: http://jsbin.com/edobux/1/

.overlay {
  background:#eee;
  border:1px solid #ddd;
  padding:30px;
  position:absolute;
  top:20px;
  left:50%;
  width:100px;
  margin-left:-50px;
  z-index:99;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
}

.wrapper {
  text-align:center;
  background:#F00;
  padding:20px;
  position:relative;
  z-index:1;
}

Might be a flash issue, try forcing the HTML5 player to see if you have any luck: http://stackoverflow.com/questions/5845484/force-html5-youtube-video — methodofaction, May 07 '13 at 18:57
Sweet! That did the trick. Post it as an answer and I'll give you credit. — Adam Youngers, May 07 '13 at 19:45
possible duplicate of [How to show a div over a Youtube video (z-index)?](http://stackoverflow.com/questions/7016680/how-to-show-a-div-over-a-youtube-video-z-index) — rr-, Feb 22 '14 at 22:17

score 4 · Accepted Answer · edited May 23 '17 at 11:50

4

Sometimes Flash doesn't play nice with HTML elements (depending on how you embed it). If you force YouTube's HTML5 player you can work around it:

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

Code borrowed from Force HTML5 youtube video

edited May 23 '17 at 11:50

Community

1
1

answered May 07 '13 at 19:54

methodofaction

70,885
21
151
164

Cross-browser absolute positioned div over iframe?

1 Answers1