大型視頻的CSS背景視頻大小調整問題

Question

我在調整大小以保持大型視頻的寬高比時遇到問題。 我正在使用此演示代碼： https : //codeconvey.com/fullscreen-html5-sensitive-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/

這利用了CSS領域中相對較新的對象適配功能 ，因此請注意兼容性。

我認為，在像這樣的背景上拉伸視頻時，總會出現較小的縮放問題，因為視口極有可能與視頻的縮放尺寸不匹配。 但是，我認為這是解決您問題的合適方法，因為可以根據需要縮放視頻的一個維度以覆蓋背景，而無需在視口外進行縮放。