背景视频宽度和高度 CSS

如何解决背景视频宽度和高度 CSS

我正在制作一个以视频为背景的网站。我使用的是 80vh（视口高度），但是当我按下 f12 时，视频背景高度变小了，如何解决？我应该将其更改为 px 还是 %？

这是我的代码

HTML：

<section class="head-banner">
    <div class="head-background">
        <video autoplay muted loop>
            <source src="frontend/media/header-background.mp4" type="">
        </video>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="head-content">
                <h1>FASHION</h1>
                <h1 class="hoks">FESTIVAL</h1>
                <h1 class="hoks">IS HERE</h1>
            </div>
        </div>
    </div>
</section>

SCSS：

.head-banner {
    width: 100%;
    height: 80vh;
    Box-sizing: border-Box;

    .head-background {
        position: relative;
        video {
            width: 100%;
            height: 80vh;
            object-fit: cover;
        }
    }

    .head-content {
        position: absolute;
        color: whitesmoke;
        z-index: 1;
        top: 0;
        left: 5%;
    }

    h1 {
        font-family: 'Montserrat',sans-serif;
        font-size: 72px;
        font-weight: 700;
    }

    .hoks {
        margin-top: -20px;
    }
}

谢谢。