Bootstrap 4 Jumbotron Video

jumbotron-video.css

.jumbotron-video {
  /* must set this so we can use position: absolute next */
  position: relative;
  /* don’t let video exceed the boundaries we set */
  overflow: hidden;
  /* show users more of page below the hero */
  height: 80vh;
}

.jumbotron-video video {
  /* ↓ take video out of flow */
  position: absolute;
  /* ↓ make sure video is behind content, which has z-index of 20 */
  z-index: 10;
  /* ↓ place video in area */
  top: 0;
  /* ↓ object-fit is not supported on IE  */
  object-fit: cover;
  /* ↓ make video fill the area */
  min-width: 100%;
  min-height: 100%;
  /* ↓ set opacity to see text */
  opacity: .6;
  /* ↓ prevent browser from distorting video */
  width: auto;
  height: auto;
}

.jumbotron-video .container {
  z-index: 20;
  position: relative;
}