Video in jumbotron-CodePudding

I've been trying to get a video into a Bootstrap 4 jumbotron but I am running into a weird issue: my content is covering up the video. Obviously I don't want that. The gap on mobile between the jumbotron and the content also gets huge on mobile. I've been trying to fix that as well but with no luck. I've also tried other answers to this question on here and they didn't work either. Here is my code so far:

/* 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 >
        <video  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 >

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

        

        <!-- /END THE FEATURETTES -->

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


      <!-- FOOTER -->
      <footer >
        <p ><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 to Codepen

Thank you for any help you can provide! I know I should upgrade to Bootstrap 5 but I haven't had time to learn it yet.

CodePudding user response：

You can nest your background-video into a section and declare the section to be height: 100vh; this will automatically push your other content down below. To demonstrate, I called the section section#video. I also moved your main to start below that section. See the changes I made in CSS and 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/[email protected]/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 >
    <video  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 >

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



    <!-- /END THE FEATURETTES -->

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


  <!-- FOOTER -->
  <footer >
    <p ><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>