Scaling HTML5 video and maintain center?

Question

I have a full-screen video playing as my background. I followed this great guide: http://epicwebsites.com/html5-video-scale-to-fill-container-with-jquery To get the proportional scaling for the video tag using jQuery.

Everything works great.

Except that the scaling appears to occur not from the center (pivot) of the video but from the top-left. In other words - the cropping of the video only comes from the right which makes the video focus not to be on it's center.

Any way to fix this? I need to keep the video centered at all time.

Here is the CSS I use for the video:

    #fullscreen_video
{
    opacity: .2;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1000;
}

Answer 1

You can use jQuery to center the video by changing the top and left attributes.

$(window).resize(function () {
    var $vid = $('#fullscreen_video');
    $vid.css({
        left: ($(window).width() - $vid.width()) / 2,
        top: ($(window).height() - $vid.height()) / 2
    });
});