BackgroundVideo
Medium — ~4KBA full-width video that plays silently in the background as the reader scrolls past it. Think of it as a moving photograph — atmospheric footage that sets the mood without demanding the reader's attention.
Drone footage background
Full-width background video with an overlay caption. The video loops silently while the reader scrolls.
Poster fallback
A BackgroundVideo with a poster image shown while the video loads. On slow connections or reduced-data devices, only the poster appears.
When to use
- Atmospheric footage between text sections — drone shots, timelapse, slow-motion nature
- Setting a mood before a key section of the story
- When a still photo feels too static but a full video player is too much
When NOT to use
- If the video has important audio — use YouTubePopIn instead so the reader can choose to play with sound
- Very long videos (over 30 seconds) — background videos should be short loops
- On pages with many other heavy elements — video uses bandwidth. One background video per page is usually enough
Configuration
- Video source: an MP4 file URL. Keep it under 10MB for fast loading
- WebM fallback: an optional WebM version for browsers that prefer it
- Poster image: a still frame shown while the video loads, or on slow connections where video is skipped
- The video autoplays silently, loops continuously, and is muted — there are no playback controls
- On devices that prefer reduced data usage, only the poster image is shown instead of the video
Limitations
- Always muted — browsers don't allow autoplay with sound
- Mobile devices may not autoplay video at all depending on the browser — the poster image appears instead
- No playback controls — this is background ambiance, not a video player. For playable video, use YouTubePopIn