CODEWITHSUNDEEP
htmlcssflashvideo
user1374796
user1374796

Reputation: 1582

Floating div over vimeo video

I'm trying to float a div over a Vimeo video, something I thought would be quite simple, but it seems not. Here's the HTML:

<div id="wrap">
   <iframe id="video" src="http://player.vimeo.com/video/15888399" width="100%" height="100%" wmode="transparent" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

A js fiddle here too: http://jsfiddle.net/wfX55/
I've tried the wmode="transparent" technique, as seen, but it seems not to work. Is it at all possible to float a div over the top of a Vimeo video?

Upvotes: 1

Views: 6347

Answers (3)

Brad
Brad

Reputation: 6342

Your div is the parent of your video and is therefore 'below' it. If you'd like to float a div over the video, you'd be better off with something like this

<div class="parent">
  <iframe></iframe>
  <div class="floatedDiv"></div>
</div>

With this CSS:

.parent {
  position: relative;
}
iframe {
  position: relative;
}
.floatedDiv {
  position: absolute; 
  z-index: 2;
}

You'll also need to set the wmode of your flash object

Upvotes: 1

j5Dev
j5Dev

Reputation: 2042

It seems you have just got a little confused regards your z-index'ing. Try this...

<style>
#wrap {
    position: relative;
    width: 400px;
    height: 250px;
    background-color: silver;
}

#video {
    position: absolute;
    z-index: 99999;
}
</style>
<div id="wrap">
<div class="video">Something here I guess</div>
<iframe id="video" src="http://player.vimeo.com/video/15888399" width="100%" height="100%" wmode="transparent" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>

Upvotes: 0

dezman
dezman

Reputation: 19388

You have to use z-index with position: absolute or relative;

Fiddle

Upvotes: 4

Related Questions