Javascript 响应式视频 height/width

Question

我想制作全屏视频响应式登录页面。我有一个居中的视频 (1920x1080)。但是当我调整 window 大小时，它没有正确调整大小。 Javascript 只求解答。

示例：http://www.welcometofillory.com/ 感谢您的帮助。

Javascript 到目前为止：

var $vid = $('.full-screen-video');

    updateSize();
    $(window).resize(function() {
        updateSize();
    });

    function updateSize() {

        var $eWidth = window.innerWidth;

        var $AspectRatio = 1080 / 1920;

        var $newHeight = $eWidth * $AspectRatio;

        $vid.css({"width": $eWidth, "height": $newHeight});


    };

Answer 1

您的代码是正确的。使用控制台查看进程：

function updateSize() {

    var $eWidth = window.innerWidth;

    var $AspectRatio = 1080 / 1920;

    var $newHeight = $eWidth * $AspectRatio;

    console.log('eWidth: ' + eWidth);
    console.log('newHeight: ' + newHeight); 

    $vid.css({"width": $eWidth, "height": $newHeight});

    console.log('real width' + $('.full-screen-video').width());
    console.log('real height' + $('.full-screen-video').height());
};

您可以测试这个 css 规则：

.full-screen-video {
    width: 100vw;
    height: calc(100vw / 1.7);  /* 1.7 is 1920/1080 */
 }

Answer 2

仅使用 css 有效：

<div class="fullsize-container">
    <video autoplay id="landing-video" class="full-screen-video" width="100%" height="100%" preload="auto" loop="loop">
        <source src="assets/landing-video.mp4" type="video/mp4">
    </video>
</div>

.fullsize-container {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.full-screen-video {
    width: 1920px;
    height: 1080px;
    max-width: 1920px;
    max-height: 1080px;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Javascript 响应式视频 height/width

Javascript responsive video height/width

html

javascript

css

jquery

html5-video