Auto-playing background videos and animations can be “delightful”, or annoying. Annoying you say? Yes, even those that might find them initially neat could very well get tired of the constant motion. Maybe they don’t overtly realize it, as they have the ability to stay relatively focused. However, such animations can be very distracting for those who have difficulty staying focused. These unstopable videos and animations could even potentially be sickening for those with Vestibular disorders.

“Delightful”…

If you find yourself in a situation where you have to implement an auto-playing background video or animation, at the very least it should be accompanied by an accessible Play / Pause control of some sort. And, particularly in the case of videos, if you’re trying to mitigate an absolute disregard for what the majority of people using the Internet want (e.g., their newly opened website not making a bunch of noise), a mute toggle button should be implemented, and initiallys set to “pressed” (muted) by default.

Fortunately, the reduced motion media query gives developers a way to implement such components in a way that will respect users based on their OS-level preferences.

As an FYI, the following reduced motion / animation OS settings will be respected by supporting browsers as noted on Can I Use:

  • Windows 10: go to Settings, Ease of Access, Display, “Show animations” toggle switch.
  • macOS: go to System Preferences, Accessibility, Display, “Reduce motion” checkbox.
  • iOS: go to Settings, General, Accessibility, Reduced Motion, “Reduced Motion” toggle switch.
  • Android 9: Settings, Accessibility, “Remove animations” toggle switch.

An example of an auto-playing video (using the <video> element) is available within the following disclosure widget (as a precaution for anyone who does not have reduced motion enabled). If reduced motion settings are detected, it will not be playing by default.

Example contains auto-playing (muted) video

auto play video test with mute and reduced See the Pen motion checks by Scott (@scottohara) on CodePen.

The important bits from the CodePen’s JavaScript:

First a var is set up to capture the current state of the the prefers-reduced-motion setting. Either reduced or no-preference.

var motionQuery = matchMedia('(prefers-reduced-motion)');

Next, a function is created to check for the state of motionQuery and then run on document load to immediately respect the user’s preference, if set.

function reducedMotionCheck() {
  if ( motionQuery.matches ) {
    // code to run if "reduced" is true
  }
  else {
    // code to run if no preference is true
  }
}
reducedMotionCheck(); 
motionQuery.addListener(reducedMotionCheck);

The additional motionQuery.addListener(reducedMotionCheck) will check for any OS level changes to the preference. So, if someone were to check the “Reduced Motion” checkbox in macOS’s accessibility settings, the video could stop playing if the reducedMotionCheck function were setup to do so.

Specifically regarding HTML’s native video element, this means that depending on the user’s preference, play() or pause() methods can be called immediately, depending on what the base markup would require. e.g., if a <video> element did not have the autoplay attribute by default, then the pause() method would not necessarily need to be called.

Note about the demo

Additional considerations should potentially be made for the manner in which the video content, and custom Play/Pause and Mute buttons are surfaced to assistive technologies. This demo was constructed primarily to showcase how to leverage the reduced motion media query with JavaScript.

Regarding background animations

Updated October 20, 2021: originally this post was just about background videos, but today I came across a great example of a background animation demo that respects users reduced motion preferences by Michelle Barker. I suggest checking it out and reading the related article on Smashing Magazine to see if maybe this is something that might be useful to you.

More about reduced motion

Please be sure to check out the following posts about the reduced motion media query: