Bootstrap 视频 Jumbotron 高度

Question

Bootstrap 视频 Jumbotron 高度

3

我的主要目标是创建一个jumbotron，其中播放视频，宽度100％屏幕和高度屏幕的70％，并消除滚动条的奇怪滚动行为，即当我滚动时，不希望视频跟随。目前，当我向下滚动页面时，视频会跟随滚动。以下是更多详细信息。

在jumbotron下面的正文中，我使用了一个具有垂直导航栏的nav data spy，当我向下滚动页面时，视频也会滚动。如何阻止这种行为？

代码：

<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>

CSS:层叠样式表

.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%;
}

非常感谢您的帮助。如果有所了解，我正在使用create-react-app。

谢谢。

- dutterbutter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Naren Murali · Answer 1

更新：

出于某种原因，您使用了 className 而不是我不确定为什么要使用的 class 属性。此外，您只能设置一个属性，即视频的 height 或 width，因为该视频需要保持比例，在示例中，我将宽度设置为 100%，高度设置为 auto，然后视频延伸到整个宽度，还需要删除 jumbotron 的所有填充！

旧：

只需删除 position:fixed，它使位置相对于屏幕而不是网站固定，因此您会获得滚动效果，我在这里使用了 position:relative 以便让视频滚动，请查看不同的 CSS 位置here。

.jumbotron {
  position: relative;
  z-index: -2;
  height: 62.5vh;
  padding: 0px !important;
}

.video-background {
  position: relative;
  overflow: hidden;
  z-index: -1;
  width: 100%;
  height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="jumbotron">
  <video class="video-background" preload="true" muted="true" autoplay="true" loop="true">
                <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
            </video>
  <div class="container-fluid" id="content">
    <h1 class="display-3">Heading Title</h1>
    <p class="lead">Sub Text</p>
    <a class="btn btn-primary btn-lg" href="#learnmore">Learn More</a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>