Question

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

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

好像身体并不知道视口小于1920x1080，因为我怀疑，它根据视频元素宽度定义了100％的宽度。如果我将1280x720p视频放入此代码，则调整大小可以正常运行，因为视频总是调整大小以填满浏览器屏幕。

我确实尝试将视频包装在容器元素中，但没有看到改进，更改任何组合中的相对/固定/绝对位置以及为html，body，container 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世界中相对较新，所以要小心兼容性。

我相信在像这样的背景上拉伸视频时总会出现轻微的缩放问题，因为视口很可能与视频的缩放尺寸不匹配。但是，我认为这是适合您的问题的解决方案，因为必须缩放视频的一个维度以覆盖背景而不在视口外缩放。

大视频的CSS背景视频大小调整问题

1 个答案: