Enable and style the play/pause button on background videos to give your site visitors control and enhance accessibility.
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.
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 for accessibility to provide controls for users to pause, stop, or hide any content that starts moving automatically and moves for more than 5 seconds (WCAG Success Criterion 2.2.2: Pause, Stop, Hide).
Webflow provides a built-in play/pause button setting for background videos so you can give your site visitors the control they need to pause or play your background video content.
In this lesson:
The Include play/pause button setting is enabled by default for all new background videos added after June 2022. For background videos added prior to June 2022, you’ll need to manually enable this setting.
To add a play/pause button to a preexisting background video:
Important: We strongly recommend leaving the Include play/pause button setting enabled to meet accessibility standards and ensure a better experience for your site visitors. Additionally, if you’ve disabled this setting, site visitors with Prefers reduced motion enabled in their operating system settings will not be able to play your background video.
Once the Include play/pause button setting has been enabled, you can customize the play/pause button to your liking.
By default, the Play/pause button is set to position: absolute, relative to the first parent element that isn’t static (in this case, the Background video element). This means it will stay nested within the Background video element and appear on top of any elements that aren’t set to position: absolute. Learn more about position: absolute.
To make sure the play/pause button always appears on top of the Background video, you can select the Play/pause button element and give it a Z-index value. The default Z-index value for any element is 0, so any value greater than 0 will position an element on top. You can feel free to use a ridiculously high Z-index value here, like 9999. Learn more about z-index values.
The play/pause button has two states: Play and Pause.
The play/pause button also comes with default icons and built-in alt text for the Play and Pause states, but you can upload any image you want.
Important: If you replace the default icons, make sure to add alt text to your own images so that anyone navigating your site will know the purpose of those buttons. For example, you could add “Play video” as alt text for the image in the Pause state, and “Pause video” as alt text for the image in the Play state.
To replace the default icons:
You may use images or icons with different sizes than the default images. You can size your images based on the parent element (e.g.., the Play/pause button).
To size your images based on the parent element:
The Play/pause button has a default Focused (keyboard) style with an offset blue outline, but you can style this outline as you wish.
For site visitors navigating your site with a keyboard, this outline makes it clear when the Play/pause button has focus (i.e., when they’re interacting with the button). This outline won’t appear when site visitors use a mouse or a finger tap to interact with the Play/pause button. Learn more about outlines.
To customize the outline on the Play/pause button:
You can also make any other styling changes you’d like to your button (e.g., border, background, backdrop filter, etc.).
Something went wrong while submitting the form. Please contact support@webflow.com