Keep an eye on your inbox!
Hmm, that didn't work. Try again?

New feature: the background video component

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

John Moore Williams
March 7, 2016
Announcements

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.

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.  

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.