Bootstrap 5: How to add Background Video as Hero

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>
      <a href="#about" class="btn-get-started scrollto">Get Started</a>
    </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>
            <a href="#about" class="btn-get-started scrollto">Get Started</a>
        </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>
            <a href="#about" class="btn-get-started scrollto">Get Started</a>
        </div>
    </section><!-- End Hero -->

Demo