Immersive Video Background Hero

A cinematic, full-bleed video hero section featuring smooth gradient overlays, lazy loading for performance, a custom play/pause controller, and mobile-friendly image fallbacks.

Make a stunning first impression. This Immersive Video Background Hero provides a beautifully responsive, cinematic entrance for any modern landing page. It balances visual impact with performance through deferred loading and mobile fallbacks.

Component Highlights

• Cinematic Gradient Overlay: Ensure your core text remains 100% readable regardless of the video underneath by utilizing a dark-to-transparent multi-stop CSS gradient overlay.
• Performance First (Lazy Loading): A small Vanilla JS script defers loading the actual heavy .mp4 file until the exact moment the page renders, preventing it from blocking the main thread.
• Mobile Poster Fallbacks: Instead of forcing mobile users on slow connections to download a massive video, it gracefully falls back to a high-quality static cover image using native HTML5 attributes.
• Absolute Centering: Perfect Flexbox layout guarantees the hero content stays dead center, scaling beautifully from ultra-wide monitors down to small iPhones.

Implementation Guide

The HTML Structure

The hero relies on a relatively positioned wrapper with the video pinned absolutely to the back. A separate .overlay div ensures text contrast.

<section class="video-hero">
  <!-- The background video element -->
  <video class="hero-video" id="bg-video" loop muted playsinline poster="/path/to/poster-image.jpg">
    <!-- Source injected by JS for lazy loading -->
  </video>
  
  <!-- Gradient Overlay -->
  <div class="hero-overlay"></div>

  <!-- Foreground Content -->
  <div class="hero-content">
    <h1>Experience the Future</h1>
    <p>A cinematic journey begins right here on your landing page.</p>
    
    <div class="hero-actions">
      <button class="btn-primary">Get Started</button>
    </div>
  </div>
</section>

The Video Object-Fit Trick

To ensure the video scales like a background image without skewing proportions, we use the object-fit: cover property.

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.7) 0%,
    rgba(15, 23, 42, 0.4) 50%,
    rgba(15, 23, 42, 0.9) 100%
  );
  z-index: 2;
}

Drop this into your project, attach an .mp4 file URL to the Javascript initializer, and instantly elevate your landing page design!