Css background video

Question

Does anyone know how to center this video?

I tried:

margin: 0 auto; text-align: center; 

So far, none of them have worked.

This is my code.

Html:

 <video autoplay loop poster="polina.jpg" id="vid"> <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> 

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 to center this background video so that it removes the same amount from the left or right side if you resize the window? Thanks for the help!

Here is my jsfiddle: http://jsfiddle.net/pwxcvxe8/2/

Answer 1

Since you are using an HTML5 element, the best way to focus the content is to put it in a relative container and then let CSS handle the rest as follows:

 <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> with any element that you want to center, of course. Since you are using the video element, I ignore the old browsers, because it seems to me that they will not like your page. You also don't need to use min- values, and it will just be centered.

Answer 2

In modern browsers, you can manipulate object-fit and do it without a container.

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