超大屏幕中的视频

Question

我一直在尝试将视频放入 Bootstrap 4 超大屏幕，但我运行遇到了一个奇怪的问题：我的内容覆盖了视频。显然我不想这样。超大屏幕和内容之间的移动差距在移动设备上也变得巨大。我也一直在尝试解决这个问题，但没有运气。我也在这里尝试过这个问题的其他答案，但它们也没有用。到目前为止，这是我的代码：

/* JUMBOTRON 
------------------------------------------------- */
.jumbotron {
  position: relative;
  z-index: -2;
  height: 62.5vh;
  padding: 0px !important;
  background-color: #FFFFFF;
}

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





/* USP CONTENT
-------------------------------------------------- */


.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;

}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* FEATURES AND QUOTES
------------------------- */

.featurette-divider {
  margin: 5rem 0; 
  width: 15%;
 
  height: 4px;
  border-top: 2px solid #FFD963;
}


.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE STUFF
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main role="main">

      <div class="jumbotron jumbotron-fluid">
        <video class="video-background" preload muted autoplay loop>
          <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
        </video>
        
      </div>


      <!-- -->

      <div class="container marketing mt-0">

        <div class="row">
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>This is the first</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
            
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->


        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider yellowline">

        

        <!-- /END THE FEATURETTES -->

      </div><!-- /.container -->


      <!-- FOOTER -->
      <footer class="container">
        <p class="float-right"><a href="#">Back to top</a></p>
        <p>&copy; 2022 &middot; </p>
        <p>
          <a href="#">link 1</a>          
          <a href="#">link 2</a>        
          <a href="#">link 3</a>      
        </p>
      </footer>
    </main>

Link 到 Codepen

感谢您提供的任何帮助！我知道我应该升级到 Bootstrap 5，但我还没有时间学习它。

Answer 1

您可以将 background-video 嵌套到一个部分并将该部分声明为 height: 100vh; 这将自动将您的其他内容推到下方。为了演示，我调用了 section#video 部分。我还将您的 main 移到了该部分下方。查看我在 CSS 和 HTML.

中所做的更改

/* JUMBOTRON 
------------------------------------------------- */

.jumbotron {
  position: relative;
  z-index: -2;
  
  padding: 0px !important;
  background-color: #FFFFFF;
}

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

section#video {
  height: 100%;
  min-height: fit-content;
}

section#main-sec {
  height: 100%;
}


/* USP CONTENT
-------------------------------------------------- */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.marketing h2 {
  font-weight: 400;
}

.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* FEATURES AND QUOTES
------------------------- */

.featurette-divider {
  margin: 5rem 0;
  width: 15%;
  height: 4px;
  border-top: 2px solid #FFD963;
}

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE STUFF
-------------------------------------------------- */

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<section id="video">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


  <div class="jumbotron jumbotron-fluid">
    <video class="video-background" preload muted autoplay loop>
          <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
        </video>

  </div>
</section>


<section id="main-sec">
<!-- -->
<main role="main">
  <div class="container marketing">

    <div class="row">
      <div class="col-lg-4">
        <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
        <h2>This is the first</h2>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>

      </div>
      <!-- /.col-lg-4 -->
      <div class="col-lg-4">
        <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
        <h2>Heading</h2>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>

      </div>
      <!-- /.col-lg-4 -->
      <div class="col-lg-4">
        <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

      </div>
      <!-- /.col-lg-4 -->
    </div>
    <!-- /.row -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider yellowline">



    <!-- /END THE FEATURETTES -->

  </div>
  <!-- /.container -->


  <!-- FOOTER -->
  <footer class="container">
    <p class="float-right"><a href="#">Back to top</a></p>
    <p>&copy; 2022 &middot; </p>
    <p>
      <a href="#">link 1</a>
      <a href="#">link 2</a>
      <a href="#">link 3</a>
    </p>
  </footer>
</main>
</section>

超大屏幕中的视频

Video in jumbotron

html

javascript

css

twitter-bootstrap

bootstrap-4