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来定义的，它们使视频居中。

用于保持背景视频居中的CSS

1 个答案: