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

    });

Left 和 top 是根据 windowWidth 和 (video) width 定义的，它使视频居中。