Hero with Background Video Overlay

Full-width Bootstrap 6 hero with a muted background video or slow-zoom poster photo, dark gradient overlay, headline, two buttons, stats and a pause control.

Also known as: video background hero, hero with video overlay, full screen video header, fullwidth hero banner

Bootstrap 6 Hero Sections Responsive Dark #background #dark #hero #overlay #responsive #video

Hero with Background Video Overlay live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A full-width Bootstrap 6 hero for travel, outdoor or brand landing pages. A muted background video, or a slowly zooming poster photo, plays behind a dark gradient overlay, with a large headline, two buttons and a stats bar. A round pause button lets visitors stop the motion at any time.

How it works

The section .hbv-root is pinned to data-bs-theme="dark" and is a flex column that pushes the content to the bottom. .hbv-media holds two layers that fill the section with object-fit: cover. The first is the poster <img class="hbv-poster">, which runs a slow hbv-drift zoom animation. The second is an empty, muted <video class="hbv-video"> that starts transparent.

script.js reads data-hbv-src from the root. When it holds a video URL, the script sets it as the video source and calls play(). On the first playing event it adds .hbv-has-video, which fades the video in over the poster. If autoplay is blocked or no URL is set (as in this demo), the poster stays visible.

.hbv-shade stacks two gradients built from --hbv-overlay. One darkens from left to right behind the text, and one darkens upward behind the stats bar. The text block .hbv-content holds the eyebrow, <h1>, intro and two buttons: btn-solid theme-warning and btn-outline theme-inverse. .hbv-bar holds a <dl class="hbv-stats"> and the .hbv-toggle button.

Clicking .hbv-toggle pauses or resumes the video. It also toggles .hbv-paused, which stops the poster animation, and updates aria-pressed, the label and the play/pause icon.

Customization

data-hbv-src on .hbv-root: set it to an MP4 or WebM URL, for example /media/hero-loop.mp4, to play a background video. Keep the file short, silent and compressed.
--hbv-overlay on .hbv-root: the RGB triplet of the overlay; use a warmer or lighter value to change the mood.
--hbv-accent on .hbv-root: the eyebrow, star and focus outline color.
--hbv-height on .hbv-root: the hero height, which never goes below 560px.
hbv-drift keyframes in style.css: change scale(1.12) or the 28s duration on .hbv-poster for a stronger or calmer zoom.
Change theme-warning on .hbv-cta to another color role for a different primary button.

The poster photo comes from Unsplash. Replace it with your own image, ideally the first frame of your video.

Use cases

Travel and outdoor sites: a muted background video plays behind a dark gradient overlay
Brand landing pages: a large headline, two buttons and a stats bar sit on top
Slow connections: a slowly zooming poster photo works when video is not available
Accessible pages: a round pause button lets visitors stop the motion at any time

Accessibility

The media layers and overlay are aria-hidden, and the poster has empty alt text because it is decorative. The video is muted and has no controls in the tab order. The .hbv-toggle button lets users stop all motion, which meets WCAG 2.2.2 (Pause, Stop, Hide). It is a toggle button with aria-pressed and a label that changes between "Pause" and "Play". Under prefers-reduced-motion the zoom animation is off, and the script starts paused, so the video never autoplays. All buttons have visible amber focus outlines.

Bootstrap 6 notes

Bootstrap 5's btn btn-warning and btn btn-outline-light become btn-solid theme-warning and btn-outline theme-inverse. The icon button uses the new btn-icon class. Dark styling comes from data-bs-theme="dark" instead of bg-dark/text-white. Built on Bootstrap 6.0.0-alpha.1, so APIs may still change.

Hero with Background Video Overlay at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile, dark design
Category: Hero Sections
License: Free for personal and commercial use

Questions about this template

Can I use the Hero with Background Video Overlay code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.