Reduced Motion Auto-Play Video

Auto-playing background videos can be annoying. However, beyond being a source of annoyance (or “user delight”, as some might say) they can be distracting for those who have difficulty staying focused, and potentially sickening for those with Vestibular disorders.

Fantastic…

If you find yourself in a situation where you have to implement an auto-playing background video, at the very least it should be accompanied by an accessible Play / Pause button. And 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 set to “pressed” by default.

Fortunately the reduced motion media query gives developers another chance at implementing such components in a way that will respect user preferences from an OS level.

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. If reduced motion settings are detected, it will not be auto playing. I’ve placed the auto-playing video within the disclosure widget just as a precaution for anyone who does not have reduced motion enabled.

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.

More about reduced motion

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

• Short note on prefers-reduced-motion and puzzled (Windows) users
• An Introduction to the Reduced Motion Media Query
• Reduced Position Sticky
• Move Ya! Or maybe, don’t, if the user prefers-reduced-motion!
• Reducing motion with the picture element