Force media background videos to respect "Reduced Motion" browser/system preference

[cjg89]

Description

When initializing a new media background in the media background polyfill, add logic that detects the user's Reduced Motion preference, and pause the video + remove its autoplay capability.

Why it's Important

Excessive motion can be disorienting for certain users, and respecting the user's existing browsing preferences will improve their overall experience on sites using background videos.

Alternatives

n/a

Possible Implementation

Use window.matchMedia('(prefers-reduced-motion)'). See article from Viget below for an example snippet.

Additional context

More information:
https://www.viget.com/articles/best-practices-for-background-videos/
https://developers.google.com/web/updates/2019/03/prefers-reduced-motion