Toggle play/pause on background videos
Background videos can engage site visitors or add a cinematic flair to your site — but they can also be distracting or even harmful for people with cognitive disabilities, vestibular disorders, or motion sickness. It's best practice to give your visitors control over autoplaying videos.
Now in Webflow, you can easily add a button to toggle pausing and playing all your background videos.
If you're replacing your image in your toggle button, be sure to add alt text to your images, so screen readers can identify what they are.
Video transcript
Background videos are a great way to engage website visitors. The problem is sometimes they can cause motion sickness (or cybersickness) — a lot of this can cause distraction and even harm. Not to mention anything that autoplays requires a way to pause or hide or just stop something like this in order to be Level-A WCAG (Web Content Accessibility Guidelines) compliant.
So I want to demonstrate this with a background video element. When I drag it in, there’s two things to note. One, it’s pretty boring as-is. That’s because I need to actually choose a background video. Once that's done, we'll give it a height of 100VH, so it takes up the full height of the viewport. And then we'll drag in some content. (I’m cheating because I already have a Container with everything inside.)
But the second thing is really powerful: it comes, by default, with a play/pause button. (I can always toggle this over in Element Settings, but it works like this.)
If we look in the Navigator, we can see that inside the background video, there’s our little button here, and it has two states (this is kind of like the success and error states in a Form). We can replace our images, we can change whatever (here’s an example where we replaced with a custom SVG — and even added a backdrop filter and a border) — all of this we can customize. And to access each of these states, we can toggle them from that same place over in Element Settings.
And here’s how it works: on the site? The background video autoplays. BUT if I press the pause button? Boom. Video paused. Resume? Resume.
Now, if someone has reduced motion turned on (on macOS) or Show Animations in Windows toggled off, the background video won’t play by default — and it’ll just pause itself as it loads. (This will also happen on a lot of mobile devices when limiting data.)
Keep in mind: if you do want to replace the image asset, make sure your alt text is still set, so it’s navigable by folks using a screen reader. (And unless there’s a really good reason not to, making sure all background videos have a play/pause button is a great way to provide users with critical control over how they interact with your site — so we strongly recommend always featuring a button like this)
But that’s the play/pause button in a Background video, with me as the background video, in the Webflow Designer.
