<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <div class="overlay"></div> <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> </video> <div class="container h-100"> <div class="d-flex text-center h-100"> <div class="my-auto w-100 text-white"> <h1 class="display-3">Video Header</h1> <h2>With HTML5 Video and Bootstrap 4</h2> </div> </div> </div> </header>

header { position: relative; background-color: black; height: 75vh; min-height: 25rem; width: 100%; overflow: hidden; } header video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } header .container { position: relative; z-index: 2; } header .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; opacity: 0.5; z-index: 1; } @media (pointer: coarse) and (hover: none) { header { background: url('http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg') black no-repeat center center scroll; } header video { display: none; } }