Javascript 响应式视频高度/宽度答案

【问题标题】：Javascript responsive video height/widthJavascript 响应式视频高度/宽度
【发布时间】：2017-02-25 12:59:48
【问题描述】：

我想制作一个全屏视频响应式着陆页。我有一个居中的视频（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});


    };

【问题讨论】：

代码应该在窗口调整大小时调整目标元素的大小，即.full-screen-video。其他地方一定有逻辑错误。
它调整了视频的大小，但它计算了错误的宽度、高度。我在较小的设备上有黑色边框
你找到的内边距是垂直的还是水平的？
垂直和水平的
:/ 好吧，现在只有垂直

标签： javascript jquery html css html5-video

【解决方案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 */
 }

【讨论】：

要使用 css 规则，您必须删除更改大小的 javascript 代码。你这样做了吗？
是的。我现在只有垂直填充。使用 javascript 代码。不知道如何解决这个问题：/
可能不是垂直填充，你把固定高度设置为视频，降低浏览器的高度，看看垂直填充是否会消失？
是的，当我降低浏览器的高度时，边框会移除
所以一切正常！你为视频设置了一个固定的高度，它起作用了！如果您不想这样做，请将视频的高度设置为 100vh 或 100%。

【解决方案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%);
}

【讨论】：