Could someone please center the background of this video?
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" 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 can I center this video backdrop so that when the window is resized, the left and right sides are removed by the same amount? I appreciate your assistance.