Accessible HTML video as a background

Today I got a comment on Autoplay is bad for all users which asked:

So why does this high-traffic site designed by a former top-Google UX designer use it?

The comment has linked to a page which has video as a background element playing underneath the introduction text and call to action button, the images are moving but there is no sound on page load. At times this apparently important information is completely invisible.

Using video as a background is on the increase so it’s important to know how to make it accessible for everyone.

What does WCAG say about it?

I don’t think there is a guideline that specifically relates to this latest design idea of putting moving video behind the introduction content. However, I think that 2.2.2 Pause, Stop, Hide is most applicable:

Moving, blinking, scrolling:
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential

While the moving background isn’t specifically ‘information’ it is interfering with the information presented alongside it, it starts automatically and lasts more than five seconds. So in this case you should provide the user some way to pause it.

On whether we should autoplay video on page load, generally I would say no. However in this implementation it is almost never accompanied with sound and that is usually the biggest annoyance for people trying to use a site – so I think we can have a little leniency on autoplaying background videos.

HTML video backgrounds in the wild


Canva (mentioned by the commenter)

Spotify (a landing page)

Sportswood Printing

Powerhouse Company

I think you get the idea.

How to do it right

PayPal‘s video background is an excellent example of how to handle the implementation in an accessible way without compromising the design:

I’m not immune to making a mistake, a couple of sites I’ve built recently don’t adhere to the principles I’ve outlined above. But now that I’ve taken the time to look into some best practices I’ll be updating those sites in the future.

Use PayPal’s example as how to do things right, don’t copy the self-proclaimed top designers. And, do as I say not as I do!