Html 全屏背景视频在18:9移动设备上不工作

我用下面的代码为这个网站实现了一个全屏背景视频。它在桌面和大多数移动设备上都能正常工作。只有在18:9格式的移动设备上，视频上下都有空白，如下图所示，但我希望视频在18:9设备上也能全屏显示。有人知道为什么会这样吗

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);
    }

---

只要在style.css第577行代码中使用此代码，它将在所有屏幕上全屏显示

.banner video {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -100; 
}

---

现在，您正在使用变换来设置左右位置，这是无用的

问题是视频是16:9，而在18:9移动设备上，视频不会填充整个视口。因此，我编写了另一个仅针对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;
        }
    }

---

左右位置和变换用于视频定心，因此有必要，还有你的代码，视频不会覆盖整个屏幕我已经编写了此代码并测试过一次，你也可以将其用于媒体查询，仅适用于手机如果你在编写此代码后仍有问题，请编写此代码，让我在你的网站上在线查看，然后我可以为你提供更好的解决方案我仍然相信我的代码是正确的workingUse object fit:cover.@Terry谢谢你，这似乎是更好的解决方案。