HTML5视频忽略z-index [英] HTML5 video ignoring z-index
本文介绍了HTML5视频忽略z-index的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以这是我到目前为止尝试:
So this is what i tried so far:
<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">
<video width="520" height="390" style="z-index:-10;">
<source src="m/video.ogv" type="video/ogg">
<source src="m/video.mp4" type="video/mp4">
</video>
</div>
我有一个固定菜单,当菜单在视频上方时,视频似乎忽略z指数。目前工作在镀铬窗口没有运气。任何想法?
I have a fixed menu and when the menu is over the video , the video just seem to ignore the z-index. Im currently working on chrome windows with no luck. Any ideas?
推荐答案
使用css position:absolute
它重叠并尝试给 z-index
Use css position:absolute
property to both elements which overlaps and try to give values higher than 0
to the z-index
Here is working jsFiddle example.
css:
#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
注意:使用overlay div停用控件,您可以使用视频中的任何内容,如jsFiddle
Note: Used overlay div for deactivate controls and you can use whatever content on your video, like in jsFiddle example.
资料来源:视频作为在网站上播放命令的背景
这篇关于HTML5视频忽略z-index的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文