How do I add a video background?
Download the video, then embed it in a muted, looping, inline-playing video element behind your content, with a poster image covering the first frame.
Four attributes do the work. Muted and playsinline are what let the video autoplay on mobile at all; loop keeps it seamless; a poster image covers the gap before the video is ready — the difference between a hero that fades in and one that flashes black.
Compress your videos before shipping. Never put a 4K file behind a simple video player in production — 1080p, H.264 or WebM, with a poster frame and preload=“none” covers almost every hero background.
Steps
- 1Download the video.
- 2Add a video element behind your content with muted, loop, playsinline, and autoplay set.
- 3Set a poster image so the first frame isn't blank.
- 4Place the video below your content in the stacking order, and add a scrim so the copy stays readable.
Related
Walkthrough — coming soon.