Enable and style the play/pause button on background videos to give your site visitors control and enhance accessibility.
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:
Something went wrong while submitting the form. Please contact firstname.lastname@example.org