Adding content under full screen video - Positioning

Question

I'm wanting to add content below a full page video. But when adding, the content fills over the video and not underneath.

So, what im looking for is:

But instead I'm getting the text over the video: 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%;
}

I have tried, played and failed. Can anyone please advise.

JSFiddle

Many thanks.

Answer 1

Try this,

#video-container {
    position: relative;

}

Demo