Bootstrap Video Jumbotron

Bootstrap video jumbotron

Looks like you've got a lot of unnecessary css going on. To start I would definitely define the jumbotron z-index in order to keep the gray padding in the background.

.jumbotron{
  position: relative;
  z-index:-101;
}

Next some cleaner simpler code for the video background like so:

    #video-background { 
      position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
        width:100%;
}

Here's the fiddle https://jsfiddle.net/kae4q601/5/ Let me know if this is what you were trying to achieve.

Video in jumbotron

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/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>© 2022 · </p>
    <p>
      <a href="#">link 1</a>
      <a href="#">link 2</a>
      <a href="#">link 3</a>
    </p>
  </footer>
</main>
</section>

Bootstrap Video Jumbotron Height

Update:

For some reason you are using className instead of class attribute which I am not sure why, also you can only set one property, either height or width for the video, since the video needs to remain proportional, in the example I have set the width to 100% and height to auto, then the video extends to the full width, also you need to remove all the padding for the jumbotron!

Old:

Just remove position:fixed, what it does it fixed the position relative to the screen and not the website, hence you are getting the scrolling effect, I have used position:relative here to all the video to scroll, checkout the different CSS positions 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 Carousel with Videos in a Jumbotron

The absolute positioning of the video background is what is breaking it.
Remove the:

position: absolute;

On the "video-background" class and all should be well.

plnkr:
https://plnkr.co/edit/63xDn8EaGB3qDLSmtrx4?p=preview

How to create jumbotron in Bootstrap 5?

The migration documents give you exactly what you need to know. In v4.x Bootstrap's .jumbotron component is literally just this:

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

You can, with the exception of the specific background color, emulate this entirely without the use of this class:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<h5>In Bootstrap v4.x</h5>

<div class="jumbotron m-3">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<h5>In Bootstrap v5.x</h5>

<div class="bg-light p-5 rounded-lg m-3">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>