Edvin Edvin - 3 months ago 11
CSS Question

Video header in HTML and CSS

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;
}

Answer

This should solve it

<html>
<head>
<style>
#headerContent {
    width: 100%;
    height: 80%;
    overflow: hidden;
    position: relative;
}

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

p {
    position: absolute;
    text-align: center;
    font-size: 4em;
    z-index: 9999;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

</style>
</head>
<body>
<div id="headerContent">
    <p> Hello </p>
    <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>
    </div>
</div>
</body>
</html>
Comments