javascript - 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

是的，请查看video_background.js您链接到的网站的源代码，特别是$(window).resize功能：

$(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 和 top 是根据 thewindowWidth和 (video)定义的，width它使视频居中。