Immersive Experiences Through Motion

How It Works

Creating an immersive video background requires careful attention to several details: the video must autoplay without sound, loop seamlessly, and provide a pause control for users who prefer less motion.

HTML Structure

<section class="hero">
  <video
    class="hero__video"
    autoplay
    muted
    loop
    playsinline
    poster="fallback-image.jpg"
  >
    <source src="hero.webm" type="video/webm">
    <source src="hero.mp4" type="video/mp4">
  </video>

  <div class="hero__content">
    <!-- Your content here -->
  </div>
</section>

CSS Styling

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

/* Dark overlay for text readability */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.7)
  );
  z-index: 0;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }

  .hero {
    background: url('poster.jpg') center/cover;
  }
}

Key Requirements

autoplay + muted — Browsers block autoplay with sound. Always start muted for reliable autoplay.

playsinline — Prevents iOS from forcing fullscreen playback. Essential for inline video backgrounds.

loop — Creates seamless continuous playback. Make sure your video loops cleanly (first and last frames should match).

poster — Shows while video loads or if it fails. Critical for slow connections and accessibility.

Pause control — Always provide a way for users to stop the video. Some users find motion distracting or uncomfortable.

prefers-reduced-motion — Respect user system preferences. Replace video with a static image for users who prefer less motion.