Create video background with HTML/CSS

I am creating a website in Bootstrap 5 and have created a fullscreen video background for the homepage. Is there a way I can have the video filling the viewport with the main title and navbar overlaying it as they currently are but all other page content sitting below the video so you would have to scroll down to view it?

Any help would be greatly appreciated. Thank you.

#myVideo {
z-index: -1;
right: 0;
bottom: 0;
object-fit: cover;
width: 100vw;
height: 100vh;
position:absolute;

}

<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 class="overlay-title">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>
    <section id="main_body">
        <div class="container-fluid edge">
            <div class="row justify-content-center animatedParent animateOnce top-row-padding" id="intro">
                <div class="col-9 animated fadeIn">
                    <div class="test" title="404">
                        <h1>So, who are we?</h1>
                    </div>    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.<p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.</p> 
                </div>
            </div>
            <div class="row justify-content-center row-padding" id="events">
                <div class="col-9">
                    <div class="row justify-content-between">
                        <div class="col-4">
                            <img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
                            <a href="#"><h2 class="mb-0">Event Name</h2></a>
                            <p class="date">Saturday 7th April</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen  amet variusye dolor sit lorem...</p>
                        </div>
                        <div class="col-4">
                            <img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
                            <a href="#"><h2 class="mb-0">Event Name</h2></a>
                            <p class="date">Saturday 7th April</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen  amet variusye dolor sit lorem...</p>
                        </div>
                        <div class="col-4">
                            <img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
                            <a href="#"><h2 class="mb-0">Event Name</h2></a>
                            <p class="date">Saturday 7th April</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen  amet variusye dolor sit lorem...</p>
                        </div>
                    </div>
                </div>              
            </div>

Current:

Aim: