html - 全屏背景视频不适用于 18 :9 mobile devices

Question

我为这个网站实现了一个全屏背景视频https://www.yu-performance.at使用下面的代码。它在台式机和大多数移动设备上运行良好。只有在 18:9 格式的移动设备上，视频上方和下方才有空白，如下所示，但我希望视频在 18:9 设备上也能全屏显示。有谁知道为什么会这样？

18:9 设备上带有空白的视频: screenshot mobile 18:9

该网站在第一部分有一个背景视频，模拟为背景大小封面，使用以下样式:

//container div
.banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;

    //fullsize background video
    video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 1000%;
        min-height: 1000%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translate(-50%, -50%) scale(0.1005);
    }

Answer 1

问题是视频是 16:9，而在 18:9 的移动设备上，视频不会填满整个视口(viewport)。所以我为只有 18:9 的设备编写了另一个媒体查询，强制视频调整到全窗口高度，然后视频将自动覆盖整个屏幕，因为放大后的 16:9 视频的宽度将大于屏幕宽度。

    @media screen and (max-aspect-ratio: 9/18) and (orientation: portrait) {
        video {
            min-width: 100% !important;
            min-height: 100% !important;
            width: auto !important;
            height: 100% !important;
            transform: translate(-50%, -50%) scale(1.0) !important;
        }
    }