Search topics
Background videos that loop with no pause button
A muted video loops behind the home page's headline from the moment the page loads, and nothing on the page pauses or stops it.
<video autoplay muted loop playsinline> The problem
People who are distracted by movement, or who read with a magnifier, have no way to stop the footage playing behind the headline
A coffee roaster's home page opens on footage: roasted beans tumbling onto a pile, filling the hero behind the headline "Fresh coffee, roasted every Monday" and a Shop coffee button. The design is drawn clean, with nothing over the footage but the words, and the video is muted so that nobody is startled by sound. It loops: its eight seconds start again the moment they end, for as long as the page is open.
There is no pause button. Clicking the hero does nothing, and neither does holding the pointer over it. Pressing Tab moves from the menu to Shop coffee and on to the week's coffees below, past nothing that stops the video. On a phone the hero fills the first screen, and the beans keep tumbling behind every word there is to read.
Success criterion 2.2.2 Pause, Stop, Hide applies to moving content that starts by itself, lasts more than five seconds, and is shown alongside other content. Footage behind a headline meets all three: autoplay starts it, loop keeps it going, and the headline, the button and the rest of the page sit beside it. So the page needs a way to pause, stop or hide it, and it has none: the video has no controls, and no button of the page's own calls pause().
muted doesn't help here. It takes away the sound, which is what 1.4.2 Audio Control is about, but not the movement. Browsers let a muted video play by itself before the visitor has clicked anything, because it makes no sound, so a muted loop starts on almost every visit, where a video with sound is held back.
The hero is the first thing on the page, so the movement starts before anyone has read a word, and stays in view while they read the headline and decide where to go next.
2 of 10 groups affected
- No vision (not affected)
- Low vision (affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Limited language, cognitive and learning abilities The footage moves right behind the headline and the first words on the page, so people with attention difficulties keep being drawn back to it and can't settle on what they came to read, and nothing on the page lets them make it stop.
- Limited vision With a screen magnifier, the headline fills the view and the tumbling footage fills everything behind its letters, so the movement is magnified along with the words being read.
The audit flags every video with no controls that plays by itself without sound, muted or with no sound track, and loops or runs for more than five seconds. It says whether it found a button near it whose name says pause, stop or play, and whether that button is hidden or fully transparent at rest, or left out of the Tab order. It can't press the button to see whether the video really stops, or find a pause control further from the video or under another name, so each one is a lead for a person to check. A video that a script plays without the autoplay attribute is caught only if it is playing when the page has loaded. AI fixes often wrap the video in a check for the reduced-motion setting and stop there, which helps only people who have found that setting, or add a pause button that fades in when the pointer is over the hero, which the keyboard never reveals and a phone has no pointer to hover with.
Try it
Try to stop the video behind the headline, first with the mouse, then with Tab
Click the hero, hold the pointer over it, then Tab through the page: nothing in the shop pauses the beans. "Stop demo" is the Learn page’s own button, not the shop’s. Then apply a fix: press the Pause button, or watch the short clip stop by itself.
Broken Can you fix this?
Fresh coffee, roasted every Monday
Single-origin beans, sent out the week they are roasted.
Shop coffeeThis week’s coffees
The fix
Let people pause the video, or end it within five seconds
<section class="hero"> <video class="hero-video" src="beans.mp4" poster="beans.jpg" autoplay muted loop playsinline></video> <div class="hero-text"> <h1>Fresh coffee, roasted every Monday</h1> <p>Single-origin beans, sent out the week they are roasted.</p> <a href="/shop">Shop coffee</a> </div></section>What is wrong3 points
- The video starts as the page loads, and
loopplays its eight seconds again and again for as long as the page is open. mutedsilences it, but it keeps moving.- It has no
controls, and the page has no button of its own, so nothing pauses it, by mouse, keyboard or touch.
A Pause button on the hero
<section class="hero"> <video class="hero-video" src="beans.mp4" poster="beans.jpg" muted loop playsinline aria-hidden="true"></video> <button type="button" class="hero-pause"> <svg aria-hidden="true" focusable="false"> <use href="#icon-pause"></use> </svg> <span class="visually-hidden">Pause background video</span> </button> <div class="hero-text"> <h1>Fresh coffee, roasted every Monday</h1> <p>Single-origin beans, sent out the week they are roasted.</p> <a href="/shop">Shop coffee</a> </div></section>How it is fixed6 steps
- Put a native
<button>in the hero, before its words, so the keyboard reaches it before Shop coffee, and draw it in the top corner, where it comes first in reading order too. It is there at rest, with no hover, on every screen size. - Give it a dark disc behind a white icon, so it keeps its contrast over the lightest and the darkest frames of the footage.
- Make it call
pause()andplay()on the video itself. The video stays paused until someone presses the button again. - Set the icon and the hidden name from the video's own
playandpauseevents, between Pause background video and Play background video, so the button tells the truth even when the browser refuses to start the video. - Hide the video from screen readers with
aria-hidden="true": it only sets the mood, and the button says what it controls. - Take
autoplayoff and start the video from the script, leaving it still for people whose system asks for less motion. That is an extra: the button is what passes 2.2.2, and without the script nothing moves at all.
This fixes the Before and passes 2.2.2, with the loop and the design as drawn.
Why this fix: Let people stop anything that moves by itself
Both pass. The Pause button keeps the endless footage the design was built around. It costs a button in a corner of the hero and a few lines of script, and the beans move for everyone until they find it. The clip that plays once costs nothing to build, and nobody has to find anything, but the designer gives up the loop: the footage has to say what it needs to in four seconds and end on a frame that works as a photo. Choose the short clip when an opening shot is enough, and the Pause button when the moving footage is part of the brand.
Pausing while the pointer is over the hero, or while focus is inside it, can stay as a kindness, but it is never the mechanism: Understanding 2.2.2 rules out a pause that lasts only while focus stays on the moving content. The same goes for a Pause button that appears only on hover. A phone has no pointer to hover with, and if it is hidden with opacity: 0, the keyboard reaches a button nobody can see; if it is hidden with visibility: hidden, the keyboard never reaches it at all.
The button needs what any icon button needs: a name, an icon with 3:1 contrast against everything behind it, at least 24 by 24 pixels (the button above is 44), a focus ring that shows on every frame (the white ring above has a dark band each side), and an icon and name that change together. A button that changes its name when pressed is not announced again by every screen reader, so check it with the ones your users have. Some sites write the word next to the icon ("Pause"), which helps people who don't know the symbol.
Keep the visitor's choice. Store it for the visit, for example in sessionStorage, and read it before starting the video, so a reload or the next page with the same hero doesn't set it moving again. Scripts that pause the video when the hero scrolls out of view, to save battery, are fine, but they must not play it again when it comes back if the visitor paused it.
Native controls give a way to pause too, but they draw a player bar over the hero, with a timeline and other buttons the hero doesn't need, so most designs use the single button above.
The reduced-motion setting is worth respecting, as the Pause button fix does by leaving the video still, and the short clip can do the same by leaving out autoplay when the setting is on. It is not a fix on its own: not everyone who is distracted by movement knows that setting is there, and 2.2.2 asks for a mechanism on the page. What the setting asks of animation that starts from an interaction is covered in animations that ignore the reduced-motion setting.
The short clip counts its five seconds from the moment the video starts moving, not from when the file finished loading. If editors can swap the hero video in a content system, check the length there, so a longer clip can't be published without the button.
The same failure shows up wherever footage moves by itself beside content. Each of these takes the same two fixes.
- A looping video in a section further down the page, such as a product shown turning on a loop.
- An animated GIF, WebP or Lottie file that stands in for a video and loops without end.
- A video embedded from Vimeo with its background option, or from YouTube with its controls turned off, set to play by itself and loop.
Tickers, carousels and other moving content that is not footage have their own guide: tickers, carousels and animations that can't be paused. A pulsing button or a spinning icon usually takes a different fix, ending by itself: pulsing buttons, glowing badges and endless animations.
Design ideas
Footage can stay, as long as people can stop it
Four ways to draw the control for a video behind a hero. Try each with the mouse, then put it aside and Tab through them: three can be seen and pressed without hovering, and one shows itself only to a mouse.
In the design file
- Draw the hero with its Pause control at rest, not only on hover, and again once paused, with Play.
- Put the control on its own dark or light backing, so it keeps at least 3:1 over the lightest and darkest frames.
- Draw it at least 24 by 24 pixels, with its focus ring over the footage.
- If there is no control, write beside the hero that the clip runs five seconds or less and plays once.
Passes
Roasted every Monday
A Pause pill with the word in it A dark pill in the hero’s lower corner, the icon and the word Pause in white on #21160f, 17.70:1, so it reads over every frame. The word helps people who don’t know the symbol, and changes to Play with the icon.Rule of thumb: Move to show a change, then stop
Roasted every Monday
One Motion switch in the header A small Motion switch in the site’s header stops this video and every other moving thing on the site, and stays off as the visitor moves on. The hero is drawn with nothing over the footage; draw the switch’s off state, in the same place on every page.Rule of thumb: Move to show a change, then stop
Roasted every Monday
A still hero with Watch the roast The hero opens on a still from the footage, with a Watch the roast pill. Nothing moves until it is pressed, and the same pill then pauses it. The first screen is calm for everyone, and the footage is there for those who want it.Rule of thumb: Move to show a change, then stop
Fails
Roasted every Monday
A pause icon that fades in on hoverWCAG 2.2.2 The corner icon appears only while the pointer is over the hero, keeping the footage clean the rest of the time. A phone has no pointer to hover with, and Tab lands on it while it is still invisible. The sample stops after four seconds; the pattern loops on.Rule of thumb: Move to show a change, then stop
Verify the fix
5 checks.
Test with: Keyboard, Touch, Mouse, Reduced motion, Screen reader
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the hero, its video or its player script changes.
Limits
This is a starting pattern, not a guarantee for every application. It covers movement only. Words over footage need their contrast on every frame, which is covered in low-contrast text on brand colours, photos and hover states. Footage that flashes more than three times in any one second is a separate check under 2.3.1, made with a flash analysis tool: see flashing banners and videos that can trigger seizures. A video that plays with its sound on has its own guide, autoplaying sound with no way to stop it. A video meant to be watched is covered in videos without captions, or with unchecked automatic ones and videos a keyboard can't play, or with no captions button. Whether the page is calm enough once the video has stopped still needs a person to judge.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
EaseWeb service
Fixed it? Keep it from coming back.
I turn guides like this one into rules your coding agents follow and checks your CI runs. Then I retest by hand with a keyboard and screen readers, periodically.