<div class="jumbotron jumbotron-fluid">

<video autoplay muted loop poster="https://dummyimage.com/900x400/000/fff">    
    <source src="" data-src="//clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    <source src="" data-src="//clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    <source src="" data-src="//clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">

  <div class="container text-white">

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

  <!-- /.container -->
<!-- /.jumbotron -->
.jumbotron {
  position: relative;
  overflow: hidden;
.jumbotron video {
  position: absolute;
  z-index: 1;
  top: 0;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
.jumbotron .container {
  z-index: 2;
  position: relative;
function deferVideo() {

    //defer html5 video loading
  $("video source").each(function() {
    var sourceFile = $(this).attr("data-src");
    $(this).attr("src", sourceFile);
    var video = this.parentElement;
    // uncomment if video is not autoplay

window.onload = deferVideo;

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js