Search code examples
htmliframeyoutubevimeo

How can I place a div on top of an embedded video player in chrome

I have a code for placing a div on top of an iframe, which works. However, when I am setting the iframe's src to a youtube/vimeo player, in chrome the iframe stays on top (it works fine in safari and FF) .

Is there some way to fix this? CSS:

#over{
    float: left;
    margin-top: -293px;
    margin-left: 185px;
    background-color: #FF0000;
    height: 30px;
}
iframe{
    float: left;
    width: 100%;
    height: 550px;
}

HTML:

<div>
  <iframe src="http://player.vimeo.com/video/67124108?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;wmode=transparent">
    You don't have iframe support, unfortunately
  </iframe>
  <div id="over">I'm over the iframe</div>
</div>

[ it can be seen in work here : http://jsfiddle.net/QPXAT/ ]

Solution

  • When you tried adding a z-index, did you specify positioning? z-index only works on positioned elements. so I added position: relative to both. Is this the effect you were going for?

    http://jsfiddle.net/QPXAT/1/