<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 ----------> <section> section <div class="overlay-vid">Overlay</div> <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> video <source src="mp4 video link here" type="video/mp4"> </video> <div class="d-flex h-100 text-center align-items-center"> <div class="container h-100"> <div class=" text-center align-items-center"> <div class="w-100 text-white"> <h1>Heading 1</h1> <p>Please replace video link video tag to work background video</p> </div> </div> </div> </section>

section { position: relative; background-color: rgb(109, 7, 7); height: 100%; min-height: 25rem; width: 100%; overflow: hidden; } section .overlay-vid { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; opacity: 0.5; z-index: 1; } section video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: 100%; 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%); } section .container { position: relative; z-index: 2; }