Background Video
Goals
Provide the functionality of the native Webflow Background Video element;
Provide full background video support
Autoplay muted option
Customizable play / pause buttons
Styling
Plus;
The ability to use off-hosted videos
The ability to customize the play / pause buttons
Support for audio
Demonstration
Usage Notes
Dependencies
No dependencies.
Currently this component does not depend on SA5's Components lib, however we'll likely add this to support added features.
Properties
Set the properties according the configuration you want.
GENERAL
MP4 Url
The MP4 url to play.
Can be hosted anywhere. You can also find and use the Url of a Background Video that was uploaded.
WEBM Url
Optional. The WEBM url to play.
SETTINGS
Play & Pause Buttons
Set to visible if you want these to appear.
Defaults to hidden. If enabled, make certain to set an ID below, for script support.
Autoplay
Set to true if you want autoplay, empty this field if you do not.
Defaults to true. Make sure to combine with muted = true. Currently it's not possible to disable autoplay due to the way Webflow handles boolean properties. See notes below.
Muted
Set to true if you want muted, empty this field if you do not.
Defaults to true.
Loop
Set to true if you want looping, empty this field if you do not.
Defaults to true.
STYLING
Class
Optional, allows you to add a custom class for sizing and z-index control.
Make certain to keep the default classes as well, these are important for operation of the control.
Pause Button Image
The pause button image you want to show.
Defaults to Webflow's native element SVG.
Play Button Image
The pause button image you want to show.
Defaults to Webflow's native element SVG.
Style
Optional. Allows a direct style string.
Convenient for simple styling such as height: 500px; z-index: 1;
ADVANCED
ID
Optional. An ID for control.
This is needed if you enable Play / Pause buttons.
Troubleshooting
Video isn't autoplaying
Make sure the autoplay field is set to true.
Make sure the muted field is set to true.
Video won't appear
In some containers, the video may be obstructed. Add z-index: 1 to styling.
Dev Team Notes
https://webflow-core-components.design.webflow.com/?pageId=689aaeddc2d58b0826fb2d1d
Future
Support Autoplay = false. Currently it's not possible to disable autoplay due to the way Webflow handles boolean properties.
Consider pre-load options
Consider streaming options
Improve placeholder image controls
Automate ID generation
Event triggers
Last updated