CSS使背景視頻居中

Question

我在網頁上播放了背景視頻，還有這個CSS；

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

..就像我想要的那樣保持居中，但是它使瀏覽器窗口中的所有邊緣都保持着，而不是始終處於全出血狀態。 我正在嘗試復制此站點的工作；

http://marisapassos.com/#home

這個網站似乎有兩套規則，一套在包含視頻的div上，一套在視頻本身上。 有人可以向我解釋為什么這樣做有效，而我在做什么卻無效嗎？ 是否還有js致力於使鏈接站點上的視頻居中？

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

    });

左側和頂部是根據windowWidth和（視頻） width來定義的，以保持視頻居中。