Video background with CSS

Here is a method to have a video autoplay and loop in the background of a webpage. The CSS has focus on it being somewhat responsive, With a framework like Bootstrap or Bulma you could achieve this easily.

Remember not to make the video file large and that it loops cleanly.


body, html {
    height: 100%;
#Container {
    width: 100%;
    height: 100%;
    overflow: hidden;
#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    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 {
    z-index: 1;


<div id="Container">
<video autoplay muted loop>
    <source src="video.mp4" type="video/mp4">