Currently, I am in the process of developing a website using Bootstrap 5, and one of the main features is a fullscreen video on the homepage. Despite my efforts, I have been facing challenges in getting the navbar and title to overlay the video properly. I need assistance in ensuring that these elements sit on top, while the rest of the content remains underneath the video. Any guidance or suggestions would be highly appreciated.
https://i.sstatic.net/DhbGA.png
<section id="header">
<div class="container-fluid edge">
<div class="row justify-content-center">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Events</a>
</div>
</div>
</div>
</nav>
<h1>This is the Overlay Title!</h1>
<video playsinline autoplay muted loop id="myVideo">
<source src="assets/video/crowd_sample.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
#myVideo {
z-index: -1;
right: 0;
bottom: 0;
object-fit: cover;
width: 100vw;
height: 100vh;
}