Video Backgrounds vs. Everyone Who Can't See Them
An autoplaying hero video is a bet that motion will impress more people than it excludes, and the bet is worse than it looks.
Imagine walking into a store where the walls are screens playing footage of the product. It’s impressive for about four seconds. Then you try to read a price tag mounted on one of the screens, and the footage keeps moving behind the text, and you realize the store has optimized for the moment you walk in at the expense of every moment after.
That’s the video background. It’s the signature move of a certain kind of homepage: a full-bleed autoplaying loop behind the headline, usually of people collaborating in a bright office, or a drone shot, or an abstract render. Teams add it because it demos well. In the pitch meeting, on a big monitor, on fast office wifi, it looks expensive. The question nobody asks in that meeting is what it looks like everywhere else.
Start with the most basic failure: reading. Your headline sits on top of the video, and the video, being a video, changes. A frame that’s dark enough to support white text is followed by a frame that isn’t. Contrast requirements exist because text needs to be distinguishable from what’s behind it, and a moving background means your contrast is different every second. Most sites patch this with a dark overlay, which helps, but notice what the overlay admits: the video was making the text unreadable, so we dimmed the video until it barely registers. At that point you’re paying the full cost of the video for a murky shimmer.
The costs are larger than legibility. Video files are enormous compared to everything else on a page. A fifteen-second loop can outweigh the rest of your homepage several times over, and it starts downloading immediately, competing with the content people actually came for. On a phone, on a metered plan, on hotel wifi, your first impression is a page that stutters while it hauls in footage the visitor never asked to watch. When I audit sites with GazeSite, the network capture makes this vivid: one asset dominating the waterfall, and it’s decoration.
Then there are the people for whom the motion itself is the problem. For visitors with vestibular disorders, large moving regions can cause genuine dizziness and nausea, not mild annoyance. For people with attention difficulties, a permanently moving object next to text is a permanently firing distraction; the human visual system is wired to attend to motion, and you cannot politely ask it not to. This is why accessibility guidelines say that moving content which starts automatically and lasts more than five seconds needs a way to pause it, and why operating systems now let users declare a preference for reduced motion that websites can detect. Most video backgrounds ship with neither a pause button nor any respect for that preference. The loop plays for everyone, forever, because pausing it was nobody’s job.
And for visitors who can’t see it at all, the video is worse than nothing. It’s silent, it’s decorative, and it carries no information a screen reader can convey, but it still costs them the bandwidth and the battery. Which raises the question worth sitting with: if the video carries no information, why is it the largest thing on the page? And if it does carry information, why is it inaccessible to anyone who can’t watch it?
I think the honest answer is that video backgrounds are a signal aimed at the wrong audience. They signal effort and budget to stakeholders, the way a marble lobby does. But visitors aren’t evaluating your budget. They’re trying to figure out what you sell, whether it solves their problem, and what to click next. Every one of those tasks is done with text, and the video makes the text harder to read, slower to arrive, and harder to concentrate on. The design is working against the page’s own goals, expensively.
The alternatives are boring and better. A still photograph, well chosen, delivers most of the atmosphere at a fraction of the weight, holds still under your headline, and gives you one frame to get the contrast right instead of hundreds. If motion genuinely earns its place, say you’re selling something that must be seen moving, then let it be a video the user chooses to play, with controls, placed below the headline instead of behind it. Chosen motion is engagement. Imposed motion is friction.
If you keep the background video anyway, the responsible version is well understood. Honor the reduced-motion preference by serving the still image to anyone who’s asked their device for calm. Provide a visible pause button. Keep the loop short and compressed hard, and don’t let it block the content. Put a solid fallback color and image behind it so the page works when the video fails, because on someone’s connection right now, it is failing.
But mostly I’d ask the prior question. The strongest homepages I see are fast, still, and legible, and they spend their drama on the words. A visitor who can read your headline instantly, on any device, over any connection, has received the best first impression you can make: this site respects my time. No drone shot beats that.
More articles
Forget the fifty-point spreadsheet; a handful of checks you'll actually run beats a comprehensive audit you'll never finish.
Read →"Contact Us" pushes the work of figuring out the next step onto the visitor, which is exactly backward.
Read →Search is the feature people reach for when your navigation has already failed them, so an inaccessible search box fails people twice.
Read →