Reduce Motion in Background Videos

I'm reading a lot about the Reduced Motion Media Query lately. It's a new kid on the block right now: it hasn't been around for long, and we're still figuring out how to use it.

Recently pioneered by Brad Frost and Dave Rupert, you can use this media query inside of a picture element, and swap out an animated gif for a static image. You can read Brad's post for more information on that.

On CSS-Tricks Chris ran with that idea, but instead tried to use an MP4. It kind of works, but is not always ideal.

I would like to propose an idea that is similar, but also completely different.

Now for something a little different #

I can't help but notice that the media query is called reduce motion, not prevent motion. Both of the above examples remove the motion, which is a pretty drastic reduction if you ask me. It's a heavy handed solution that is often necessary, but not always.

The picture element gives us a lot of useful tools for using adaptive content, images that adjust to give the user the best experience possible. But the picture element is less good at interactive content—it's not designed for that.

There is another element that was designed for interactive content: the video element. Not only is the video element more suited for video content, such as MP4s, but it also gives us the ability to change our content interactively, rather than at runtime.

So here's my idea: what if, rather than removing the motion in an MP4, what if we slow it down? I have no way to know if this is a good idea, but it seems like something that is in the spirit of prefers-reduce-motion, so I threw together a little demo to see if it was possible. Here's the JavaScript I wrote:

var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
var $video = document.querySelector('.reduce-motion');

if (reduceMotion.matches) {
$video.playbackRate = 0.5;

It's a simple little script, and you can use it on any site that uses a video element. It does one simple thing: slows down a video to 50% speed if the user prefers reduced motion. Here's what it looks like in practice:

See the Pen Prefers Reduced Motion video demo by Timothy Miller (@webinspect) on CodePen.

It does what it says on the tin: if you have prefers-reduced-motion enabled, the video slows down to 50% speed.

And amazingly, it works out pretty well.

Issues #

Unfortunately this solution would not work for most videos: slowing down a video only works when it is purely decorative. I would argue that any videos that autoplay should be purely decorative though, lest you risk annoying your users.

For several years now we've seen a trend of full-screen background videos used right at the top of a lot of major websites. Perhaps this is the perfect solution for that situation? Those who prefer reduced motion get exactly that: a slower video with reduced but not removed motion.

In any case this is a practical solution that we can use today without worrying about browser support, and even if it isn't ideal for most situations, it's still a good tool to have in your tool belt.

← Home

  • Add inclusive lang checker, remove non-inclusive language from blog posts
  • Adds a couple of new drafts, and a new post about reduced motion