HTML Template with Video Background 2026

Q: How do I add a video background to an HTML website?

HTML: ` `. CSS: `position:absolute; inset:0; width:100%; height:100%; object-fit:cover` on the video inside a `position:relative; overflow:hidden` container. Add a dark overlay (`rgba(0,0,0,.5)`) and center your text on top with `position:relative; z-index:1`. Always provide WebM + MP4 sources for cross-browser support.

Video Background Hero — Full Code

<section class="hero-video">
  <video
    autoplay muted loop playsinline
    poster="hero-fallback.jpg"
    loading="lazy"
    aria-hidden="true">
    <source src="hero.webm" type="video/webm">
    <source src="hero.mp4" type="video/mp4">
  </video>
  <div class="hero-overlay">
    <h1>Your headline</h1>
    <a href="/checkout.html" class="btn">CTA</a>
  </div>
</section>

/* ── CSS ─────────────────────── */
.hero-video { position: relative; height: 100vh;
  overflow: hidden; }
.hero-video video { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: relative; z-index: 1;
  background: rgba(0,0,0,.5); height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video video { display: none; }
}

Video Background Performance — Keep PageSpeed 80+

Use WebM format first (30–50% smaller than MP4) — Chrome, Firefox, Edge all support it
Target under 3MB for the hero video — compress with Handbrake (free)
Always provide a poster image — displayed until video loads, prevents flash of empty screen
Add loading="lazy" — video doesn't load until browser is ready
aria-hidden="true" on the video — decorative, screen readers should ignore it
Use prefers-reduced-motion: hide video, show poster image for users who prefer no animation
Host video on Cloudflare Pages CDN — avoids external CDN latency from YouTube/Vimeo embeds

Video Background: When to Use, When to Avoid

Use Video Background When:

High Emotional Impact Needed

Travel, hospitality, luxury brands, events — where atmosphere sells. A 10-second video clip of a hotel pool converts better than any photography for premium accommodation.

Avoid Video Background When:

Performance is Critical

SaaS landing pages, e-commerce — where every millisecond of load time costs conversions. A static hero with a product screenshot converts better and loads 10× faster.

Get All 180+ Templates — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I add a video background to an HTML website?

HTML: `

Does a video background hurt PageSpeed?

Yes, if done incorrectly. A large uncompressed MP4 can drop PageSpeed from 90 to 50. Mitigation: compress to under 3MB with Handbrake, use WebM format (30-50% smaller), add `loading='lazy'`, provide a poster image fallback, and add `@media(prefers-reduced-motion:reduce){video{display:none}}`. With these techniques, PageSpeed impact is 5-15 points rather than 30-40.

How do I compress a video for a website background?

1) Download Handbrake (free, Mac/Windows/Linux). 2) Load your video. 3) Choose Web Optimized preset. 4) Set resolution to 1920x1080 max. 5) Bitrate: 800-1500 kbps for video, 0 kbps audio (muted background needs no audio track). 6) Export as MP4 first, then use FFmpeg or CloudConvert to also create a WebM version. Target: under 3MB for a 10-15 second loop.

How do I make a video background accessible?

Accessibility requirements for video backgrounds: 1) `aria-hidden='true'` — decorative video is ignored by screen readers. 2) `muted` — required by browser autoplay policies and prevents audio distraction. 3) `@media(prefers-reduced-motion:reduce){video{display:none}}` — respects user's motion sensitivity setting. 4) Ensure text contrast over the video overlay passes 4.5:1 WCAG ratio — test with the darkest and lightest video frames.

Should I host video on YouTube or on my own server?

For hero video backgrounds: self-host on Cloudflare Pages or Netlify (not YouTube embed). YouTube embeds load YouTube's JavaScript, add 2-3 seconds of load time, and show YouTube UI/recommendations. Self-hosted WebM files load directly from the CDN edge near the user. For testimonial or product demo videos: YouTube or Vimeo embeds are fine — use lazy loading to defer the embed until the user scrolls to it.