I recently played around with html5 and came across the idea to use
a fullscreen video as the websites' background using the following html-code:
<video id = "video_background" preload = "auto" autoplay = "true" loop = "loop">
<source src = "videos/football.mp4" type = "video/mp4" />
</video>
Additionally, I used the following css-code to align it properly:
#video_background{
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
max-width: 4000%;
max-height:4000%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
It's working pretty well, but I would like to have my video horizontally centered on every browser resolution.
No matter which way I tried to achieve this effect (via margin or %-based positioning), the video kept stick to the right bottom.
Any ideas on how to resolve this "issue"?