New feature: the background video component

Now you can quickly and easily add background videos to your Webflow sites. Find out how.

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.

You'll find the new Background Video component in the Components section of the Add Panel.

Just click or drag-and-drop the component where you want it, upload your video, then style away.

The missing guide to the freelance designer's life is here

Learn everything you need to know about making the leap to freelancing, from how to find clients to how to price your services.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Start reading

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.

Your video won't play while you're working in the Designer, so switch to Preview mode to see it 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.  

Join the conversation

What's Webflow?

Try it for free
More about the Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Build website interactions and animations visually.

More about Interactions

CMS

Define your own content structure, and design with real data.

More about the CMS

Ecommerce

Goodbye templates and code — design your store visually.

More about Ecommerce

Editor

Edit and update site content right on the page.

More about the Editor

Hosting

Set up lightning-fast managed hosting in just a few clicks.

More about Hosting