Bootstrap 5: How to add Background Video as Hero - html

Question

I have a template looks like this:
Now I want to replace the Background image with a Background video. So I tried adding this <video> to the section:
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="container position-relative" data-aos="fade-up" data-aos-delay="500">
<h1>Welcome to Day</h1>
<h2>We are team of talented designers making websites with Bootstrap</h2>
Get Started
</div>
</section><!-- End Hero -->
But as you can see the video collapses the next div like this:
I also tried changing background image source to video but didn't load the video:
#hero {
width: 100%;
height: calc(100vh - 110px);
background: url("https://www.w3schools.com/howto/rain.mp4") top center;
background-size: cover;
position: relative;
}
Result:
So how can I load the background video properly so that next div which is the welcome message will be over that and not next to it?
UPDATE:
Code:
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="container position-absolute" data-aos="fade-up" data-aos-delay="500">
<h1>Welcome to Day</h1>
<h2>We are team of talented designers making websites with Bootstrap</h2>
Get Started
</div>
</section><!-- End Hero -->
Result:

Answer 1

Looks like you just need to use position:absolute instead...
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="container position-absolute" data-aos="fade-up" data-aos-delay="500">
<h1>Welcome to Day</h1>
<h2>We are team of talented designers making websites with Bootstrap</h2>
Get Started
</div>
</section><!-- End Hero -->
Demo