MotionEffects
Video Backgrounds
Full-bleed video sections with configurable overlay darkness. Premium tier — use only in hero sections.
Premium Full-bleed video sections with configurable overlay darkness. The CSS classes live in css/premium-effects.css. Video backgrounds carry performance cost — use only in hero sections, never in below-the-fold cards.
Overlay variants
| Variant | Overlay | Use when |
|---|---|---|
.video-bg | 45% dark | Default — readable text on most footage |
.video-bg--light | 20% dark | High-contrast footage with pale backgrounds |
.video-bg--heavy | 65% dark | Dark-theme sections needing strong text contrast |
.video-bg--gradient | Top-to-bottom gradient | Prefer gradient over flat overlays for editorial look |
Implementation
<section class="video-bg video-bg--gradient">
<!-- Video sits below content via z-index -->
<video autoplay muted loop playsinline>
<source src="ambient.mp4" type="video/mp4">
<source src="ambient.webm" type="video/webm">
</video>
<!-- Content layer -->
<div class="video-content">
<h1>Your smile starts here</h1>
<p>Modern dental care in a comfortable setting</p>
<a href="/book" class="hover-lift click-press">Book a Visit</a>
</div>
</section>Always provide a WebM source as the first option — it is smaller than MP4 for the same quality and loads faster. The autoplay muted loop playsinline combination is required for autoplay to work on iOS.
Performance notes
- Max video duration: 8–12 seconds looping. Longer loops mean longer initial download.
- Resolution: 1280×720 is sufficient for most hero backgrounds. 1920×1080 adds significant file size for minimal gain.
- File size target: under 5 MB. Use HandBrake or FFmpeg to compress before production.
- Preload behavior:
preload="none"(default) defers the video download until play begins.preload="metadata"loads the poster frame and duration only.preload="auto"loads the full file on page load — avoid for below-the-fold or conditional sections. - Poster image: add
poster="hero-poster.jpg"to display a still frame while the video loads. Without it, some browsers show a black rectangle.
Scroll-scrubbed video Premium
Video playback tied to scroll position — user scrolls to advance the video frame-by-frame. Requires premium-scroll.js and GSAP. See Premium tier for the implementation pattern.