TL;DR
- Decorative video has to earn its weight. For many pages, a well-made poster does the job.
- Pausing a video doesn't stop its download, so control loading separately from playback.
- Handle refused autoplay gracefully, and provide an accessible equivalent when the video carries essential content.
The expensive part of a background video can start before anyone watches it. Put several video sources on a page and the browser may begin fetching them while the visitor is still reading the hero.
Pausing a video and preventing its download are separate tasks. A useful implementation handles both.
Decide whether the page needs video
Start with the purpose. A product demonstration may explain something a still image can’t. A decorative loop may add atmosphere, but it has to justify its extra weight and its ongoing motion.
For a gallery of project previews, a poster with playback on demand may be enough. For a hero, a good still can hold the design when autoplay is blocked, motion is reduced or the network is slow.
The poster needs to look intentional. A blank rectangle waiting for a video isn’t a fallback.
Trim the file before changing the loader
Remove unused duration and audio from decorative footage. Export for the size it’s actually displayed at, not the largest resolution you have. Compare suitable encodings on the browsers the project supports.
Check the first and last frames of the loop. A smaller file that flashes at every repeat can look worse than a slightly larger, clean loop.
Transferred bytes depend on how many visits load the asset, not just on the size of the headline file. As a rough illustration, a fully transferred 5 MB video loaded on 10,000 visits adds up to about 50 GB in decimal units, before counting other media. Actual transfer and billed usage vary with partial downloads, caching and provider rules.
Use that arithmetic to decide where to investigate, not as a saving you’ve already measured.
Loading, playing and visibility are separate controls
The preload attribute expresses a loading preference, not a guarantee. Autoplay can trigger fetching even when the page requests little preloading.
If the goal is to prevent an offscreen video from being requested, delaying the assignment of its source gives you clearer control. That needs JavaScript and a working poster. It’s an implementation choice, because pause() does not stop a download automatically.
Use viewport detection to start loading just before the video is needed, so playback is ready when it appears. Pause it when it leaves the useful viewing area. For a decorative effect, also pause when the browser tab is hidden.
The observer margin is a tuning parameter. Loading slightly early can prevent a blank wait, while a large margin can start several downloads at once.
Autoplay isn’t a promise
Muted inline playback often fits browser autoplay policies, but playback can still be refused. Handle the promise that play() returns. If it fails, leave the poster and an appropriate user control in place instead of letting an uncaught error reach the console.
For ongoing decorative motion, provide a usable pause control where it’s required. Reduced motion should choose a still image or another calm presentation, and it shouldn’t hide information.
If the video communicates essential content, provide an accessible equivalent. Calling it a background video doesn’t make its message decorative.
Test the request timeline
Use the Network panel with the cache disabled. Open the page without scrolling and check which videos are fetched. Then scroll to one preview and see whether unrelated assets start loading too.
Repeat the test with reduced motion, with autoplay blocked and on a narrow viewport. Check that a failed source leaves the layout usable, and that the pause controls work from the keyboard. The layout and motion side of these choices is covered in Motion that helps a marketing site, and motion that gets in the way.
After deployment, compare usage over a meaningful period with similar traffic. A shorter loop and a better loading policy can reduce unnecessary transfer, but changes in traffic can make a simple monthly comparison misleading.
The aim isn’t video at any cost. It’s the visual effect the page needs, delivered only when it has a reasonable chance of being useful.