css - 避免在响应式视频背景中出现底部间隙

Question

我正在尝试制作这样的响应式视频背景:

HTML

<video  id="bgvid" autoplay="true" loop="true" preload="auto" poster="img/code-landing-page/desktop-bg-2.png">
    <source src="videos/code-promo-bg.mp4" type="video/mp4">
</video>

CSS

    html, body{
        margin:0px;
        padding: 0px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    video#bgvid {
        position: absolute;
        min-width: 100%;
        min-height: 100%;
        z-index: -100;
        width: 120%;
        height: auto;
        //width: auto;
        //height: 100%;
    }

但是当窗口高度足够大时，此解决方案会在底部留下一个白色间隙。有没有办法避免它，例如在 www.y.co 中？

Answer 1

我会试试这个:

video#bgvid {
  z-index: -100;
  min-width: 100vw;
  min-height: 100vh;
}

其背后的原因是，当您仅使用高度:100vh 或宽度:100vw 时，浏览器将使视频适合屏幕并且较小的一侧获胜。使用 min-* 较长的一侧获胜，并且由于溢出:隐藏在主体样式中，它将被切掉。 (在我的测试中，视频看起来没有失真)

vw 和 vh 是单位，其中 100vw 表示浏览器屏幕的整个宽度，100vh 表示浏览器屏幕的整个高度。

这可能值得研究 post在css-tricks上，底部有解决方案