Fullscreen background video and keep it centered

Question

I\'m trying to create a site where I have a background video playing with some HTML5. This is all working perfectly, it works just the way I want it. But I also want to keep

Answer 1

I would try centering the video with position absolute inside of a fixed wrapper. So for example:

Place your video inside of a fixed wrapper with 100% width and height:

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Center the video inside of an extra large area with margin auto:

#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

And stretch it to full size with min-width and min-height:

#video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
} 

---

Here the final result:

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
}

Here also a jsfiddle.