Javascript 响应式视频高度/宽度

Question

我想制作一个全屏视频响应式着陆页。我有一个居中的视频 (1920x1080)。但是当我调整窗口大小时，它没有正确调整大小。请仅使用 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 */
 }