1

我试图在 vimeo 视频上浮动一个 div，我认为这很简单，但似乎不是。这是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>

这里也有一个 js fiddle：http: //jsfiddle.net/wfX55/
我已经尝试过这种wmode="transparent"技术，如所见，但它似乎不起作用。是否可以将 div 浮动在 vimeo 视频的顶部？

4

3 回答 3

4

你必须z-index使用position: absolute or relative;

小提琴

于 2013-02-20T22:42:04.247 回答
1

您的 div 是您的视频的父级，因此位于它的“下方”。如果你想在视频上浮动一个 div，你最好用这样的东西

<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;}

您还需要设置 Flash 对象的 wmode

于 2013-02-20T22:42:26.400 回答
0

看来您对 z-index'ing 有点困惑。尝试这个...

<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>
于 2013-02-20T22:50:08.010 回答