html - Css background video -

html - Css background video -

does know how center video background?

i tried:

margin: 0 auto; text-align: center;

so far none of these worked.

this 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 center video background removes on left/right side same amount if resize window? helping!

here jsfiddle: http://jsfiddle.net/pwxcvxe8/2/

since using html5 element best way center content set in relative container , allow css handle rest 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%; /* next size video fit total container. not necessary, 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> element want center, of course. because using video element i'm ignoring older browsers guess won't page anyway. don't have to utilize min- values, , center.

html css video background