CODEWITHSUNDEEP
htmliframeyoutubevimeo
Yuval
Yuval

Reputation: 514

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/ ]

Upvotes: 1

Views: 4385

Answers (3)

melissa
melissa

Reputation: 11

You don't need to mess with z-index.
Remove float and add position: absolute to top <div> and it should work.

#over {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  width: 100%;
  height: 30px;
  top: 293px;
}

iframe {
  float: left;
  width: 100%;
  height: 550px;
}

Upvotes: 1

okcoker
okcoker

Reputation: 1349

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/

Upvotes: 2

The Surrican
The Surrican

Reputation: 29866

Its not an issue with the iframe, its an issue with the flash player.

Flash has the so called wmode which specifies how the embedded object should be displayed with other html content.

Usually it is on top of everything, but it can be also specified to honor z-index etc.

wmode=window : Usually the default option. This puts the Flash movie on top of all other content on the HTML page.

wmode=opaque : This mode is supposed to let Flash play well within an HTML page and adhere to z-index ordering.

Here is a good summary:

http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/

Upvotes: 0

Related Questions