在全屏视频下添加内容 - 定位

我希望在整页视频下添加内容。但是，添加内容时，内容会填满视频而不是下面。在全屏视频下添加内容 - 定位

所以，找什么IM是：

enter image description here

但相反我得到了视频中的文字：jsFiddle

HTML

<div id="video-container"> 
<video id="bgVid" loop class="fillWidth" autoplay poster="<?php echo bloginfo('template_directory') . '/images/ship-bg.jpg'; ?>" alt="ship cargo"> 
<source src=video/science.mp4 type=video/mp4> 
</video> 
</div> 

<div id="underneath"> 
<p style="color:#fff">content underneath</p> 
</div>

CSS

#video-container { 
    position: absolute; 
} 
#video-container { 
    top:0%; 
    left:0%; 
    height:100%; 
    width:100%; 
    overflow: hidden; 

} 
video#bgVid { 
    position:absolute; 
    z-index:-1; 
    background: url('../images/ship-bg.jpg') no-repeat; 
    background-size: cover; 
    transition: 1s opacity; 
} 
video#bgVid.fillWidth { 
    width: 100%; 
}

我尝试过，玩过并失败过。任何人都可以请指教。

JSFiddle

非常感谢。

来源

2015-03-03 user2538833

试试这个，

#video-container { 
    position: relative; 

}

Demo

来源

2015-03-03 13:30:54 Logz

谢谢，这似乎工作到一个点。但视频不再适合屏幕。 – user2538833 2015-03-03 14:09:52

@ user2538833：检查http://jsfiddle.net/UI_Designer/20ropLz3/15/视频适合屏幕... – Logz 2015-03-04 03:53:24

试试这个

#underneath{ 
position:relative; 
z-index:-2; 
}

来源

2015-03-03 12:37:54 Symfony

对不起，我的英语不好。不在下面但在下面。所以视频在顶部和直接下面的内容。 – user2538833 2015-03-03 12:50:51

在全屏视频下添加内容 - 定位

回答

相关问题