0

Web ページで再生される背景ビデオと、この 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 に関するルールとビデオ自体に関するルールの 2 つのセットがあるようです。誰かがなぜそれが機能し、私がしていることは機能しないのかを説明できますか? リンクされたサイトのビデオを中央に保つために動作するjsもありますか?

4

1 に答える 1

4

はい、video_background.jsリンク先の Web サイトのソース、具体的には$(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

于 2013-07-28T11:11:53.900 に答える