Video
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 — the user's scroll advances the video frame by frame. data-premium-video-scrub registers the container with the scrub handler in premium-scroll.js, which needs GSAP and ScrollTrigger already loaded.
<div data-premium-video-scrub data-scrub-pin="true" data-scrub-distance="300vh">
<video muted playsinline preload="auto">
<source src="product-reveal.mp4" type="video/mp4">
</video>
</div>
<script>BrikPremium.init();</script>data-scrub-distance controls how far the user scrolls to play the full video. data-scrub-pin="true" pins the container during playback. Scrubbing needs the whole file decoded up front, so preload="auto" is required here — the opposite of the autoplay-background guidance above.