Css background video
Since you are using an HTML5
element the best way to center content is to put it in a relative container and then let CSS handle the rest like this:
<div id="Container">
<video></video>
<div></div>
</div>
body, html {
height: 100%;
}
#Container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#Container video {
position: absolute;
left: 50%;
top: 50%;
/* The following will size the video to fit the full container. Not necessary, just nice.*/
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
#Container div {
position: relative;
z-index: 1;
}
You can replace <video>
by any element you want to center, of course. Because you are using the video
element I'm ignoring older browsers as I guess they won't like your page anyway. You also don't have to use the min-
values, and it would just center.
Working example with object-fit: cover;
More about it here https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.videobg {
height: 100vh;
overflow: hidden;
position: relative; /* requires for to position video properly */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover; /* combined with 'absolute', works like background-size, but for DOM elements */
}
<div class="videobg">
<video autoplay loop muted>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>