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

Question

我想在整页视频下面添加内容。但是在添加时，内容会填充视频，而不是在下面。

所以，我正在寻找的是：

但相反，我正在通过视频获取文字：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

非常感谢。

Answer 1

试试这个

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

Answer 2

试试这个，

#video-container {
    position: relative;

}

Demo