Html 视频标签占据了整个浏览器空间

当我进入页面时，我试图让我的视频占据整个浏览器的大小。然而，我看到了下一个

以下是该页面的HTML：

以下是

视频容器的CSS：

.video-container {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: no-repeat;
    background-size: cover; 
}

带有
class=“index”
的
不包含任何内容：

.index {

}

您是否尝试过大众和vh

.video-container {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: relative;
    background: no-repeat;
    background-size: cover; 
}


vh（视口高度）
vw（视口宽度）
按照@theStreets93的建议使用vh和vw，但我发现当它应用于正文和html时，我会得到更好的结果，然后将子元素（例如
.video container
）设置为100%。通过将
顶部、底部、左侧、
和
右侧
设置为0，使主体和html
相对
和
。视频容器
绝对
将为您提供完全的控制，但它可能会拉伸和扭曲您的视频，因此需要进行相应调整。重置
边距、填充、
和
边框
以及
框大小：边框框/继承
应抵消UA默认值，如添加到正文中的恼人的8px
边距

我注意到在你的HTML
.video容器中
不是身体的孩子，你也有几个身体的孩子。我建议您修剪一些多余的元素，并将确实需要的元素的高度或线条高度设置为0（如果可能）。如果您能够打开，您可能还必须打开
.video container
。当然，如果其余元素是静态的（即默认的
position:static
），您可能不必进行所有剥离。
很难说，因为您没有提供适当的演示：\

html, body { 
    box-sizing: border-box; 
    font: 400 16px/1.45 'Source Code Pro';
    position: relative;
    width: 100vw;
    height: 100vh;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0; 
    padding: 0; 
    border: 0;
}

.video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: no-repeat;
    background-size: cover;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

请发布您完成的代码或提供演示。也许这可以帮助您：我现在将CSS设置为：这将填充浏览器页面，但当我拖动浏览器时。我注意到文本开始与视频重叠。我成功地创建了一个JSFIDLE！：如果你把窗户拖来拖去。您可以看到文本与视频重叠