Autoplay Background Videos: Why That Hero Video Could Be an Accessibility Problem

A big, silent video playing behind your headline is one of the most popular design choices of the last decade. It looks premium, it fills empty space, and it makes a homepage feel alive. It is also one of the most common accessibility problems we see on small-business sites, and unlike a lot of accessibility issues, this one is usually a decision someone made on purpose, not a bug that slipped through.

If your site has a hero video that starts playing by itself, this article is for you. You do not need to be a developer to understand what is going wrong or to ask the right questions to get it fixed. The good news: in almost every case you can keep the video. You just have to give people a way to make it stop.

Why an autoplaying video is different from a photo

A background photo sits there. A visitor looks at it, reads your headline, and moves on. It never demands anything from them.

A moving video is different because it competes for attention whether the visitor wants it to or not. For a lot of people that is mildly annoying. For some people it is genuinely disabling:

  • People with vestibular disorders (inner-ear conditions that affect balance) can feel dizzy, nauseous, or disoriented from motion on screen. A panning drone shot or a fast-cut montage can physically make someone ill.
  • People with attention-related and cognitive disabilities can find it nearly impossible to read your text while something moves next to it. The motion pulls their focus away every second or two, so the words never land.
  • People with certain seizure conditions can be affected by flashing or high-contrast flickering content. Most hero videos are safe, but a video with strobe effects, camera flashes, or rapid light-to-dark cuts is a real risk.
  • People on slow connections or metered data get a heavy file downloaded automatically, which can cost them money or make the whole page crawl.

None of these people did anything wrong. They just landed on your homepage. And because the video started on its own, they never got to opt out.

The four rules a background video can break

Web accessibility is measured against a standard called WCAG (the Web Content Accessibility Guidelines). You do not need to memorize it, but it helps to know that an autoplaying video can trip several of its most basic rules at once. These are all Level A, which is the minimum, most essential tier.

1. Moving content must be pausable (WCAG 2.2.2, “Pause, Stop, Hide”)

This is the big one. The rule is simple: if content moves, blinks, or scrolls automatically for more than five seconds, the user must be able to pause, stop, or hide it. A looping hero video runs indefinitely, so it clearly falls under this rule.

Most hero videos fail it outright. There is no pause button anywhere. The video just loops forever, and the only way to escape it is to scroll past, which does not help someone who needs to read the headline sitting on top of it.

2. Audio that plays automatically must be controllable (WCAG 1.4.2, “Audio Control”)

If your video plays sound automatically for more than three seconds, you must give people a way to turn it off, separate from their device volume. Autoplaying sound is jarring for everyone and a serious problem for screen-reader users, because your video’s audio talks over the screen reader they rely on to navigate.

The safe move here is easy: background videos should be muted by default. Nearly all are, partly because browsers now block autoplaying sound anyway. If yours has sound, mute it.

3. Nothing should flash more than three times a second (WCAG 2.3.1)

Content is not allowed to flash more than three times per second, because rapid flashing can trigger seizures. Most footage is fine, but be careful with videos that include strobe lighting, lightning, camera flashes at an event, fast strobing transitions, or rapidly alternating bright and dark frames. If you are not sure, that footage is not worth the risk on a homepage that loads for every single visitor.

4. Text over the video must stay readable (WCAG 1.4.3, “Contrast”)

Because the video is constantly changing, your headline might have plenty of contrast against a dark frame one second and almost none against a bright frame the next. Text that is readable over one part of the footage can vanish over another. This is a contrast failure that only shows up while the video plays, which is exactly why it gets missed.

The one fix that solves most of this: a real pause button

If you take one thing from this article, take this: add a visible, working pause button to your background video.

A proper pause control does more than satisfy a rule. It is the single change that turns a video from something imposed on your visitors into something they can control. Here is what a good one looks like:

  • It is visible, not hidden until you hover. Many people never hover (touchscreen users, keyboard users), so a hover-only button does not count.
  • It can be reached and pressed with a keyboard, using the Tab key to move to it and Enter or Space to press it. A large share of people who need this control do not use a mouse.
  • It has a clear label a screen reader can announce, like “Pause background video.” An unlabeled icon button is invisible to someone who cannot see the icon.
  • When pressed, it actually stops the motion and stays stopped. Bonus points if the site remembers the choice as the visitor moves between pages.

A pause button is a small piece of work for a developer, and it resolves the “Pause, Stop, Hide” failure completely. If you ask for one thing to be added, ask for this.

The professional touch: respect “reduce motion”

There is a setting built into every modern phone and computer called Reduce Motion. People with vestibular disorders, migraine conditions, and motion sensitivity turn it on precisely so that websites and apps calm down. It is one of the clearest signals a visitor can send that motion causes them problems.

A well-built site listens for that setting and, when it is on, does not autoplay the background video at all. It shows a still frame instead. The visitor never has to hunt for a pause button because the site respected their choice before the page even finished loading.

This is not exotic, and it is not expensive. It is a few lines of code that check for the setting. When you talk to whoever manages your site, the phrase to use is: “Can we make the hero video not autoplay for people who have Reduce Motion turned on?” A capable developer will know exactly what you mean. Respecting this setting is one of the clearest markers that a site was built by someone who understands accessibility rather than someone who bolted it on afterward.

What about “decorative” videos?

A common pushback is: “It is just decoration, it does not need to be accessible.” That argument works for a still background image, which a screen reader can simply skip. It does not work for a moving video, because motion affects people regardless of whether it carries meaning. A decorative video that makes someone dizzy is still making them dizzy. Decoration is about whether content needs a description, not about whether it needs to be controllable.

So yes, a background video can be decorative in the sense that it does not need alt text or captions describing every frame. But it still needs a pause control and it should still respect Reduce Motion. Those requirements come from the motion itself, not from the meaning.

A short checklist you can hand to your team

You do not have to fix any of this yourself. You just have to know what to ask for. Here is a checklist you can copy into an email to whoever manages your website:

  1. Add a visible pause/play button to the background video that works with a keyboard and has a clear label.
  2. Make sure the video is muted by default (no autoplaying sound).
  3. Do not autoplay the video for visitors who have “Reduce Motion” turned on. Show a still frame instead.
  4. Check the footage for flashing or strobe effects, and replace it if it flashes more than three times a second.
  5. Confirm the headline text stays readable over the brightest and darkest frames of the video, adding an overlay tint behind the text if needed.
  6. Watch the file size, since a heavy autoplaying video hurts everyone on a slow or metered connection.

If your site can check off those six items, your hero video is doing its job of looking great without shutting anyone out.

The bottom line

Autoplaying background videos are not banned, and you do not have to strip yours out to be accessible. What you cannot do is take away the visitor’s control. Motion that a person cannot stop, cannot mute, and cannot opt out of is the problem, not the video itself. Give people a real pause button, honor the Reduce Motion setting, keep the sound off, and check for flashing, and you get to keep the polished look while making sure the person with a vestibular disorder or an attention-related disability can still read your homepage.

The theme running through all of it is the same one behind almost every accessibility improvement: let people choose. A video they chose to play is a nice touch. A video they cannot escape is a barrier.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.