Canonical: https://motionspec.dev/blog/background-video-wcag-2-2-2

Guide

# Background video and WCAG 2.2.2: autoplay with a pause button

[Kevin Fröba](https://motionspec.dev/about) · 2026-10-09 · MotionSpec

**A muted background video that starts by itself and loops is moving content under [WCAG 2.2.2 Pause, Stop, Hide](https://motionspec.dev/blog/wcag-2-2-2-pause-stop-hide) (Level A): it needs a control that pauses it, unless it ends on its own within five seconds.** Muting answers a different criterion — sound — and does nothing for the motion. This guide gives the pattern: no `autoplay` attribute, a start that checks the visitor's reduced-motion setting, and one button that pauses and plays. We ran the code in Chromium with both motion settings.

## Does WCAG 2.2.2 apply to a background video?

**Yes, once three things hold.** The video **starts automatically**; it **lasts more than five seconds**, which a loop always does; and it is **presented in parallel with other content**, such as the headline and button laid over it. The W3C's Understanding document opens its list of moving content with it:

> "Common examples include motion pictures, synchronized media presentations, animations, real-time games, and scrolling stock tickers."
>
> — [W3C, Understanding Success Criterion 2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)

Two cases fall outside. A clip that plays once and ends within five seconds needs no control under 2.2.2. And a video the visitor starts with a play button does not start automatically: the same document defines that as anything "not the direct result of a user's intentional activation, for example, selecting a link or button".

## Doesn't muting the video solve it?

**Muting solves WCAG 1.4.2 Audio Control, not 2.2.2.** [1.4.2](https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html) is about sound: "If any audio on a web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level." A muted video plays no audio, so 1.4.2 has nothing to apply to. The picture still moves, and 2.2.2 is about the picture.

Muting does matter for a practical reason. Browsers block autoplay of audible media, and [MDN's autoplay guide](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay) notes that this blocking is not applied to video elements whose audio track is muted or absent. That is why background videos are muted — not because it makes them accessible.

## How do you add a pause button to a background video?

**Leave out the `autoplay` attribute and let a few lines of script decide.** Without JavaScript, the visitor sees the poster image and nothing moves. With it, the video starts only if the visitor has not asked for reduced motion, and a button pauses and resumes it either way.

```html
<div class="hero-media">
  <video class="hero-video" muted loop playsinline preload="metadata" poster="/img/hero-poster.jpg">
    <source src="/video/hero.mp4" type="video/mp4">
  </video>
  <button type="button" class="hero-video-toggle" hidden>Pause background video</button>
</div>
```

```js
const video = document.querySelector('.hero-video');
const toggle = document.querySelector('.hero-video-toggle');
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

function updateToggle() {
  toggle.textContent = video.paused ? 'Play background video' : 'Pause background video';
}

toggle.addEventListener('click', () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});
video.addEventListener('play', updateToggle);
video.addEventListener('pause', updateToggle);

toggle.hidden = false;
updateToggle();

if (!reduceMotion.matches) {
  // play() returns a promise; it rejects when the browser refuses autoplay.
  video.play().catch(updateToggle);
}
```

`play()` returns a promise that, in MDN's words, "is rejected when playback fails to begin (such as if autoplay is denied)"; the `catch` then sets the label to "Play background video" and the poster stays up. The button starts `hidden` and is shown by the same script that wires it, so a visitor without JavaScript never meets a button that does nothing. Its label names the action it will perform, which is why it needs no `aria-pressed`. Place it inside the hero where it stays visible — a corner works — and give it a solid background so its text stays readable over a moving picture.

We ran this code in Chromium. Without a motion preference, the video played, the button paused it and the frame held, and the button resumed it. With Reduce Motion on, the video did not start until the button — reached with Tab and pressed with Enter — started it.

## Is prefers-reduced-motion enough on its own?

**No.** The media query reaches only visitors who have set the preference in their operating system; 2.2.2 asks for a mechanism that every visitor can use on the page. Ship the button for everyone and the reduced-motion start for those who asked — the two rails explained in [prefers-reduced-motion, explained](https://motionspec.dev/blog/prefers-reduced-motion). CSS cannot do the job by itself either: no CSS property pauses a `<video>` element, and `animation-play-state` applies to CSS animations only. A `prefers-reduced-motion` rule can hide the video, but a visitor without the preference still gets no control.

## What about page builders?

Elementor renders a self-hosted background video with `autoplay muted playsinline` and, unless its Play Once setting is on, `loop` — with no controls, and its video handler does not check `prefers-reduced-motion`, so the video also plays for visitors who asked for reduced motion. Play Once ends the loop and hides the video when it ends. For a clip of five seconds or less that takes it out of 2.2.2's scope; for a longer clip it shortens the problem without removing it, because the video still starts by itself and runs past five seconds. The rest of the Elementor picture is in [Elementor and prefers-reduced-motion](https://motionspec.dev/blog/elementor-animations-reduced-motion).

## What does the free check see?

**Nothing, and it says so.** [The free motion check](https://motionspec.dev/motion-check) reads a page's CSS; it does not inspect `<video>` elements. We ran its engine offline on a test page whose only motion was an autoplaying, looping background video. The result was "not measurable", with the note that no CSS motion was found and runtime motion is not audited. On a page that also has CSS animation, the video is simply not part of the findings. Background video is a manual check; the full manual walkthrough is in [how to verify web motion accessibility](https://motionspec.dev/blog/verify-web-motion-accessibility).

## What this does not cover

- **Video that carries information.** A product demo or an explainer the visitor chooses to play is not a background video. It needs captions and, depending on the content, audio description — a different set of criteria.
- **Flashing.** Footage that flashes more than three times a second falls under WCAG 2.3.1, whatever the controls. Nothing in this pattern checks the footage itself.
- **YouTube and Vimeo backgrounds.** An embedded player is paused through its own API, not `video.pause()`. The pattern is the same; the calls differ.

**Scope note: this is detection, not a conformance verdict.**

The [free CSS animation accessibility checker](https://motionspec.dev/motion-check) reads a page's linked CSS files and inline style blocks and reports the failing patterns it can see, each with a fix. It does not certify a page, and it is not a legal determination. For the full manual process across a page's motion — criteria, patterns and checks in order — see [how to verify web motion accessibility](https://motionspec.dev/blog/verify-web-motion-accessibility).

## FAQ

### Does a muted background video need a pause button?

Yes, if it starts automatically, runs longer than five seconds and sits alongside other content, which describes a looping hero video. Muting addresses WCAG 1.4.2 Audio Control. WCAG 2.2.2 Pause, Stop, Hide is about the moving picture and asks for a mechanism to pause, stop or hide it.

### Is a background video that plays once exempt from WCAG 2.2.2?

Only if it ends within five seconds. A clip that plays once and stops by itself inside five seconds needs no pause control under 2.2.2. A longer clip that plays once still starts automatically and runs past five seconds, so it still needs one.

### Can CSS pause a background video for reduced-motion users?

No. No CSS property pauses a video element; animation-play-state applies to CSS animations only. A prefers-reduced-motion media query can hide the video, but pausing it, or not starting it, takes JavaScript, for example a window.matchMedia check before calling play().

[Shipping hero videos for clients? The agency motion handoff: 10 checks before a client site ships →](https://motionspec.dev/blog/agency-motion-handoff)

MotionSpec checks and compiles UI animation for AI-generated web apps — it does not generate AI video.