Bootstrap hero header snipp with video background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap header snipp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.video-wrapper{
position: relative;
height:600px
}
.video-wrapper video {
object-fit: cover;
display: block;
position: absolute;
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
top: 0;
left: 0;
}
.video-wrapper .video-content {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
</style>
</head>
<body>
<div class="video-wrapper">
<video poster="https://i.ibb.co/cFhYgtM/movie2.jpg"
src="https://bootstraplily.com/demo/images/movie2.mp4" autoplay="" loop="" playsinline=""
muted=""></video>
<div class="video-content">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 col-xl-6 text-center text-white mx-auto">
<h1 class="display-3 fw-bold text-white mb-4">Top-Notch Support</h1>
<p class="fs-4 text-white pb-4">We are a digital agency specializing in web design, mobile development and
seo optimization.</p>
<div>
<a class="btn btn-primary px-5 py-3 fw-semibold">Read More</a>
</div>
</div>
<!-- /column -->
</div>
</div>
<!-- /.video-content -->
</div>
<!-- /.content-overlay -->
</div>
<div class="container">
<div class="row">
<div class="col-6 mx-auto pt-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis augue vel enim suscipit, at egestas est convallis. Phasellus interdum nulla ac aliquet iaculis. Phasellus tortor tortor, interdum nec facilisis id, feugiat mollis magna. Pellentesque volutpat urna sed purus pulvinar ornare.
</p>
<p>
Sed sed egestas mi. Nullam hendrerit mollis dolor, vitae accumsan nulla rhoncus quis. Nullam feugiat felis odio, et commodo ligula bibendum vel. In accumsan arcu vel tempus euismod. Curabitur eros mi, imperdiet quis porta vel, vulputate nec arcu. Ut feugiat lacus sed turpis maximus, at feugiat tellus interdum. Phasellus arcu dolor, facilisis et risus ac, auctor vehicula metus. Mauris condimentum arcu vitae lorem malesuada, ut luctus tortor luctus. Fusce viverra ut magna vel lobortis. In eu tincidunt nulla, in gravida augue.
</p>
</div>
</div>
</div>
</body>
</html>
