Reduced Motion Auto-Play Video
Published:
Jul 12, 2019
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, [...]