Video header in HTML and CSS

Question

I am creating a webpage that is supposed to have a video header in the top who stretches out to the screen on the with but only display 80% if the height, and then put text inside the header.

I've succeeded in getting the video to loop and stretch out to the screen on the width and only display 80% of the screen height by surrounding it by a wrap that only displays 80% of the content.

I haven't succeeded by trying to put the text upon the header by using "z-index" header because I'm using "position: inherit" on the video, it works when I set the "position: absolute" but then the video displays more than it should!

Here's the HTML

<div id="headerContent">
    <video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop>
        <source src="http://eyday.net/Titas%20Communications%20/Assets/1Intro_f_tablet.mp4" type="video/mp4">
    </video>
    Hello
</div>

Here's the CSS

#headerContent {
    width: 100%;
    height: 80%;
    overflow: hidden;
}
video {
    position: inherit;
    min-width: 100%;
    overflow: hidden;
    z-index: -1;
}

Solution

Wrap the word Hello into the div, then give that div position absolute, and place it wherever you want.