Html 自举视频巨振子高度

我的主要目标是有一个可以播放视频的jumbotron，屏幕的宽度为100%，高度为70%，并消除滚动这种奇怪的滚动行为，当我滚动时，我不希望视频跟随。当前，当我向下滚动页面时，视频将跟随。更多细节如下

在身体里的巨型机器人下面，我正在使用一个带有垂直导航条的导航数据间谍，当我向下滚动页面时，视频也随之滚动。我如何阻止这种行为

代码：

<div className="jumbotron">
    <video className="video-background" preload="true" muted="true" autoplay="true" loop="true">
        <source src="example.mp4" type="video/mp4" />
    </video>
    <div className="container-fluid" id="content">
        <h1 className="display-3">Heading Title</h1>
        <p className="lead">Sub Text</p>
        <a className="btn btn-primary btn-lg" href="#learnmore">Learn More</a>
    </div>
</div>

任何帮助都将不胜感激。我正在使用CreateReact应用程序，如果有任何问题的话

---

谢谢。

更新：

出于某种原因，您使用的是

className

而不是

class

属性，我不知道为什么，您也只能为视频设置一个属性，即

height

或

width

，因为视频需要保持比例，在本例中，我将宽度设置为

100%

，将高度设置为

auto

，然后视频将扩展到全宽，您还需要删除jumbotron的所有填充

旧版：

只需删除

position:fixed

，它所做的是固定相对于屏幕而不是网站的位置，因此您获得了滚动效果，我在这里使用了

position:relative

来滚动所有视频，检查不同的CSS位置

.jumbotron{
位置：相对位置；
z指数：-2；
高度：62.5vh；
填充：0px！重要；
}
.视频背景{
位置：相对位置；
溢出：隐藏；
z指数：-1；
宽度：100%；
高度：自动；
}

标题标题
子文本

感谢您的快速回复。这解决了我的滚动问题，谢谢你给我指出了一个好的资源。但是，视频仍然不能覆盖屏幕的100%或正确的高度。任何建议。@dutterbutter更新了我的答案，请检查！谢谢你的工作！className的原因是因为react。只是澄清一下，所以没有办法为视频jumbotron设置所需的高度？必须将其设置为高度：自动；？例如，如果我不想让它填满100%的窗口高度，但65%和100%的宽度，这是不可能的？@dutterbutter如果这样做，那就最好了，因为你不会失去视频的比例，只需将宽度设置为任何像素或百分比和高度设置为自动，那么就不会丢失比例！

.jumbotron{
    position: relative;
    z-index:-2;
    height:62.5vh;
}
.video-background { 
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
    width:100%;
    height: 70%;
}