How to Implement Lazy Loading for WebM Backgrounds Without LCP Regression

The Core Challenge: Background Video vs. Native Lazy Loading

Unlike <img> elements, <video> tags do not support loading="lazy" — the attribute is specified only for <img> and <iframe>. Deferring hero WebM backgrounds requires a hybrid approach that balances viewport detection with critical rendering path priorities. Understanding the mechanics behind Native Lazy Loading for Images and Iframes provides the foundational logic for deferring offscreen assets without triggering layout shifts. This guide details a production-ready IntersectionObserver pipeline that safely defers heavy media payloads while preserving visual stability.

Step 1: Optimized WebM Generation & Poster Fallback

Generate a VP9-encoded WebM with a lightweight poster to reserve layout space and prevent CLS. Strip the audio track to satisfy autoplay policies.

# CRF 30 balances visual fidelity and payload size.
# -an removes audio (required for autoplay in most browsers).
# -vf "scale=1920:-2" forces even pixel dimensions required by VP9.
ffmpeg -i source.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 -an \
  -vf "scale=1920:-2" hero-bg.webm

# Extract first frame as poster
ffmpeg -i hero-bg.webm -vframes 1 -q:v 2 hero-poster.webp

The poster must match the exact aspect ratio of the encoded video to prevent CLS during the initial paint.

Step 2: HTML Structure & Data Attributes

Defer the src attribute using data-src and declare muted, loop, and playsinline to satisfy cross-browser autoplay policies.

<!-- Fallback: wrap in <noscript> for JS-disabled environments,
     or swap to a CSS background-image -->
<video class="hero-webm"
       poster="/assets/hero-poster.webp"
       data-src="/assets/hero-bg.webm"
       muted
       loop
       playsinline>
</video>

Step 3: CSS Aspect Ratio Lock

.hero-webm {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

/* Initial opacity: 0 prevents FOUC but requires JS to restore visibility.
   Ensure poster dimensions match video to avoid layout shifts. */
.hero-webm.loaded {
  opacity: 1;
}

Step 4: IntersectionObserver Implementation

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;

      // Swap deferred source and trigger network fetch
      video.src = video.dataset.src;
      video.load();

      // Transition to visible once data is available
      video.addEventListener('loadeddata', () => {
        video.classList.add('loaded');
      }, { once: true });

      // Graceful autoplay: catches NotAllowedError if policies change
      video.play().catch(() => {});

      // Prevent redundant execution
      observer.unobserve(video);
    }
  });
}, {
  // Trigger ~200px before viewport entry to reduce visible buffering
  rootMargin: '200px'
});

document.querySelectorAll('.hero-webm').forEach(v => observer.observe(v));

Note: Adding loaded in the loadeddata event rather than immediately after video.src = ... prevents a flash of invisible content on slow connections.

Expected Performance Deltas

Aligning these metrics with broader resource scheduling, as outlined in Lazy Loading, Preloading & Fetch Priorities, ensures the video pipeline does not compete with critical above-the-fold assets.

Debugging & Failure Recovery