大型视频的 CSS 背景视频大小问题

Question

我在调整大小以保持大型视频的宽高比时遇到问题。我正在使用这个演示代码:https://codeconvey.com/fullscreen-html5-responsive-video-background/

我的问题是我可以让视频居中以正常工作，如果窗口大于视频，视频会调整大小以保持纵横比，但是 1920x1080 视频不会缩小以适合高度或较小屏幕上的浏览器宽度(例如，1440 像素宽的笔记本电脑)。视频似乎从未按比例缩小其原始大小。

就好像主体不理解视口(viewport)小于 1920x1080，因为我怀疑它是根据视频元素宽度定义 100% 宽度。如果我将 1280x720p 视频放入此代码中，调整大小将完美无缺，因为视频始终会调整大小以填满浏览器屏幕。

我确实尝试过将视频包装在容器元素中，但没有看到任何改进，以任意组合更改相对/固定/绝对位置以及为 html、正文、容器 div 等定义宽度高度。

如果可能的话，我不想依赖 javascript。出于质量目的，我还想使用 1080p 视频。放大 720p 视频不能满足我在这个特定元素上的需求。

我需要的是:覆盖整个浏览器窗口的响应式背景视频，使用 1080p 视频，视频的最小尺寸可以适合屏幕，同时保持视频的纵横比。 (视频必须在较小的屏幕上缩小)

Answer 1

这是您要找的吗？

<style>
    #video-bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    #video-bg > video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div id="video-bg">
    <video autoplay loop>
        <source src="Boat_15.mp4" type="video/mp4">
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div>

取自这里:

https://fvsch.com/code/video-background/

这利用了 object-fit，它在 CSS 世界中相对较新，因此请注意兼容性。

我相信在这样的背景上拉伸(stretch)视频时总会出现一些小的缩放问题，因为视口(viewport)很可能与视频的缩放尺寸不匹配。但是，我认为这是解决您的问题的合适方法，因为它可以根据需要缩放视频的一个维度以覆盖背景，而不缩放到视口(viewport)之外。