Background videos. You’ve always loved the way they bring life and motion to websites. And you’ve always wanted to use them on your Webflow sites.
Well, now you can do it quickly and easily, with the all-new Background Video component, which you'll find in the Webflow Designer's Add panel.
Just click or drag-and-drop the component where you want it, upload your video, then style away.
While your video uploads and transcodes, you’re free to keep designing other elements of your site, and you can check the upload progress by selecting the element and opening the Settings tab. And once it’s uploaded, you can switch to Preview mode to see your new background video in all its glory.
You can add elements to the background video component the same way you can add elements to a section or container element, so overlaid headlines, buttons, forms, and more are all fair game.
You can also easily add a solid or gradient background color overlay to improve legibility of overlaid text, or just add a touch of on-brand color.
Want a more detailed walkthrough? Check out the tutorial in our Help Center. Or just go ahead and watch it now:
We can’t wait to see what you guys and gals do with this powerful new component! Happy designing!
A note on file size
We don’t compress the video file after it’s uploaded, so take care of that before you upload — unless you want to leave your website’s visitors hanging while they download the asset. You can use a free online compression service like clipchamp.com.