Css background video

Does someone know how to center this video background?

I tried:

margin: 0 auto; text-align: center; 

So far but none of these worked.

This is my code.

Html:

<video autoplay loop poster="polina.jpg"> <source src="" type="video/webm"> <source src="" type="video/mp4"> </video> 

Css:

video#vid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(polina.jpg) no-repeat; background-size: cover; margin: 0 auto; } 

How do i center this video background so it removes on the left/right side the same amount if you resize the window? Thanks for helping!

Here is my jsfiddle:

5 Answers

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

* { 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> <video autoplay loop muted> <source src="" type="video/webm"> <source src="" type="video/mp4"> </video> </div>

In modern browsers, you can manipulate object-fit and do this without the container.

video.bg { position: absolute; top: 0; left: 0; z-index: -100; width: 100%; height: 100%; object-fit: cover; } 

 .name-class { background: url(../images/tv-temp.png) no-repeat; background-position: center; height: 686px; position: fixed; top: 100px; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .name-class video { height: 473px; position: absolute; top: 148px; left: 3px; width: 100%; } <div> <video controls playsinline="" loop="" autoplay=""> <source src="..\video-name.mp4" type="video/mp4" autostart="true"> </video> </div> 

place the video inside a <center> tag