Auto Play Pause

title: "Auto-Play and Pause — Controlling Media Playback Accessibly" description: "Learn how to handle auto-playing media and provide pause controls that give users control over audio and video playback." weight: 9 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, media]

Auto-playing media can disorient users. WCAG requires that auto-play be limited, preventable, or controllable with a visible pause mechanism.

## What You'll Learn

How to handle auto-play responsibly and provide users with control over media playback.

## Why It Matters

Auto-playing video or audio can cause motion sickness, disorient screen reader users, and use excessive bandwidth. Users must always have control.

## Real-World Use

A news site has a video that auto-plays on page load. The video has a prominent Pause button. No audio plays until the user interacts. The video has a 3-second max for auto-play animations.

## Auto-Play Policy

```html
<!-- Do not auto-play audio -->
<audio controls preload="metadata">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

<!-- Auto-play video muted (allowed) -->
<video controls autoplay muted playsinline>
  <source src="hero-video.mp4" type="video/mp4">
</video>

<!-- Auto-play disabled -->
<video controls preload="none">
  <source src="large-tutorial.mp4" type="video/mp4">
</video>

Pause on Visibility

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    video.pause();
  }
});

// Or using Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      video.pause();
    }
  });
});
observer.observe(video);

Common Mistakes

1. Auto-play video with sound

Auto-play with audio is disorienting. Always start muted and let the user enable sound.

2. No pause button

Every auto-playing element must have a visible pause control.

3. Video continues playing off-screen

Pause video when it scrolls out of view using Intersection Observer.

4. No reduced motion support

Respect prefers-reduced-motion. Disable auto-play when the user prefers reduced motion.

5. Long animations without pause

Any animation over 5 seconds needs a pause, stop, or hide mechanism (WCAG 2.2.2).

Practice Questions

1. Is auto-play with sound ever acceptable? Only if the user has explicitly requested it. Otherwise, start muted.

2. What CSS media query checks for reduced motion preference? @media (prefers-reduced-motion: reduce) to detect the user's motion preference.

3. How can you pause video when it scrolls off-screen? Use Intersection Observer to detect visibility and pause the video.

Challenge: Create a hero section with an auto-playing muted video that pauses when scrolled out of view and respects reduced motion.

FAQ

Mini Project

Create a page with a hero video that auto-plays muted, pauses on scroll, and respects reduced motion. Add a visible pause button.

What's Next

Learn about Media Attributes like controls, preload, and loop and their accessibility implications.