Question

我的主要目标是拥有一个视频播放的超大屏幕，100％的屏幕宽度和70％的屏幕高度和消除滚动奇怪的滚动行为，当我滚动我不想要视频跟随。目前，当我向下滚动页面时，视频如下。更多细节如下。

在正文中的jumbotron下面，我正在使用带有垂直导航栏的导航数据间谍，当我向下滚动页面时，视频会随之滚动。我该如何阻止这种行为？

代码：

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

感谢。

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>

Bootstrap Video Jumbotron Height

1 个答案: