CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvideo
Tom
Tom

Reputation: 159

How to overlay elements over video using HTML/CSS

I'm building a website in Bootstrap 5 that features a fullscreen video on the homepage. I'm tried a few methods to make the navbar and title overlay the video but am struggling to get them to sit on top with the rest of the content sitting underneath the video. Any help would be greatly appreciated.

Image

<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;

}

Upvotes: 0

Views: 1122

Answers (1)

rauberdaniel
rauberdaniel

Reputation: 1033

Try setting the z-index of your video to -1 in order to move it in the background (assuming it has position: absolute already assigned)

#myVideo {
  z-index: -1;
}

Upvotes: 1

Related Questions