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 the image centered on the screen, even when a user resizes the browser.

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>

I got this to work with some jQuery, but was wondering if there is a CSS solution for this.

function resizeHandler() {
        // scale the video
        var documentHeight = $(document).height();
        var documentWidth = $(document).width();
        var ratio = $('#video').width() / $('#video').height();

        if((documentWidth / documentHeight) < ratio) {
            $('#video').css({
                'width': 'auto',
                'height': '100%',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginRight = $('#video').width() - $(document).width();
            $('#video').css('left', -marginRight);
        } else {
            $('#video').css({
                'width': '100%',
                'height': 'auto',
                'left': '0px',
                'right': '0px',
                'top': '0px',
                'bottom': '0px'
            })

            var marginTop = $('#video').height() - $(document).height();
            $('#video').css('top', -marginTop);
        }
    }

This is the jQuery I wrote to stretch the image to fit the screen, and to keep the image sort of centered. Not sure if this is possible in CSS, but if somebody knows how to, this might be nice.

Answer 1

This question just have been referenced into Place video with 100% height & 100% width using css or javascript

I guess my answer for that could be the one you were looking for?

Here's the code:

header {
    position: relative;
    height: 100vh;
    z-index: 0;
}
header h1 {
    text-align: center;
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
    color: #fff
}
header video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

<header>
    <h1>Sample Title</h1>
	<video autoplay loop class="bg-video">
		<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
	</video>
</header>

And here's a working fiddle example.

Hope it'll help someone else :)

Answer 2

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;   
}

<div id="video-wrap">
    <video id="video" loop autoplay>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

Here also a jsfiddle.

Answer 3

This should make #video the entire size of the viewport and remain there when the user scrolls.

#video {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}