CSS to keep background video centred

Question

I've got a background video playing on a web page, and this CSS;

#video_background {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    z-index: -1000;
    overflow: hidden;
}

..is keeping it centered, like I want it to, but it's keeping all of the edges within the browser window, rather than always being full-bleed. I'm trying to replicate what this site is doing;

http://marisapassos.com/#home

This site appears to have two sets of rules, one on a div that contains the video, and one on the video itself. Could someone explain to me why that works and what I'm doing doesn't? Is there also js working to keep the video on the linked site centered?

Answer 1

Yes, look at the video_background.js in the source of the website you linked to, specifically at the $(window).resize function:

$(window).resize(function() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        var width;
        var height;

        //size
        width = windowWidth;
        height = width*formH/formW;
        if(height<windowHeight){
            height = windowHeight;
            width = formW*height/formH;
        }

        $div_holder.css("width", width);
        $div_holder.css("height", height);

        $div_holder.css("left", windowWidth/2-width/2);
        $div_holder.css("top", windowHeight/2-height/2);

    });

Left and top are defined in terms of both the windowWidth and (video) width which keeps the video centered.