<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 ----------> <div class="video-bg"> <div class="video-overlay"></div> <div class="text-overlay"> <div class="container"> <h2 class="text-golden">Inspiring the Future <br>Through History</h2> <div class="line"></div> </div> </div> <video loop autoplay muted playsinline poster="img/video/poster.jpg"> <source src="https://cdn.pixabay.com/video/2023/07/04/169951-842348732_large.mp4" type="video/mp4"> </video> </div>

.video-bg { height: 100vh; overflow: hidden; position: relative; } @media only screen and (max-width: 768px) { .video-bg { height: 70vh; } } .video-bg video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .video-bg .video-overlay { position: absolute; background: rgba(0, 22, 20, 0.75); inset: 0; z-index: 8; } .video-bg .text-overlay { padding-top: 60px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; z-index: 9; text-align: center; } .video-bg .text-overlay .line { border-bottom: 1px solid #ECAA2B; max-width: 300px; width: 100%; display: inline-block; } .video-bg .text-overlay h2{ color: #fff; }