-1

I am having problems with an embedded youtube video.

I want that a fixed div goes over the embbedded youtube video. I know and read about the issue, and added ?wmode=opaque at the end of the source, and still not worked. Also i tried a bunch of other variants ?wmode=transparent &wmode=transparent

Here is the iframe code:

<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Here is div css code:

#footer{
margin:0 auto;
width:950px;
height:335px;
position:fixed;
bottom:0;

}

Also i am having another problem, don't know if it`s related, it's very strange. If I go on youtube and try to embed another video in the place of the old one. It will not change the video, will change the width with the new one but the video is the same, with the new width from the other video i try to embed. If i embed with the old youtube code it will show the new video.

Please help me fix the two issues, they are driving me crazy!

Clifford
  • 88,407
  • 13
  • 85
  • 165
Spreadzz
  • 289
  • 3
  • 6
  • 13
  • Could you post an example of this happening? When I place a fixed div over an embedded video it seems to work just fine. [Link](http://codepen.io/seraphzz/pen/wLBsI). – Nils Kaspersson May 23 '13 at 18:18
  • possible duplicate of [overlay opaque div over youtube iframe](http://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe) – Cees Timmerman Sep 10 '14 at 14:47

1 Answers1

2

You need to put a z-index on your footer:

http://jsfiddle.net/P3ysJ/9/

#footer{
    margin:0 auto;
    width:950px;
    height:335px;
    position:fixed;
    bottom:0; 
    z-index: 1000;
    color: #c00;
    font-size: 3em;

}

<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>

<footer id='footer'>overlap</footer>
Rob R
  • 1,011
  • 8
  • 10