Lesson info

Webflow's background video element gives you a great way to grab visitors' attention, giving motion to the background of a particular section of content. In fact, a background video behaves almost like a section, so you can put content right inside.

In this video, we’ll show you how to: 

  1. Add a background video to your site
  2. Preview your background video
  3. Style your background video

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

A Background Video is a great way to grab attention, giving motion to the background of a particular section of content. In fact, a Background Video behaves almost just like a section, so we can put content right inside.

We'll cover three parts of Background Videos: adding, replacing, and styling.

Let's start with adding.

From our Elements Panel, under Components, we can grab a Background Video. And we can drag it into our project just as we'd drag in a section. So we'll place it in the page body.

Right after doing this, we're prompted to upload a video. We can use most of the common formats here — we'll select this video to bring it into our project. The video will upload and then it'll transcode. And while it's doing this, you can keep designing or work on that novel you've always wanted to write.

That's adding a Background Video.

To replace the Background Video? Two ways to access this.

We can select the Background Video and click to access its settings (we can also double-click the element itself to do the same thing). And our Background Video Settings appear. We can hover over to preview the current Background Video, we can click here preview the video itself in a new tab. And of course we can press Replace Video to upload and transcode a new video.

Alternatively—this is the second way to replace it—with the Background Video selected, we can go into our Element Settings Panel. Same access to the Background Video Settings, including the option to replace.

That's replacing.

Finally, let's cover styling.

By default, the Background Video is going to have some height so you can see what's going on. If you go to Preview, we can see the Background Video in action. Back out of Preview? We can configure...and style.

Now below us we already have a preconfigured section. So before we style, let's grab the container from that section and drag it right into our Background Video. Again, the Background Video is now acting as a section.

With our Background Video selected, let’s change our Display Setting to Flex, so we can go in and center our content. Unlike a section, a Background Video has to have a fixed height. We can leave this as-is (by default it’s 500 pixels tall). But in this case, let’s make a change. And let’s go down through the different views to have a look, making changes to that height (making sure the background video is sized nicely on each view). Once we’re done with that? We can go back to our default view.

Let's scroll down and add some contrast using a gradient on our background. And the video's still there, but we'll adjust each of our stops. We can go in and make adjustments to the color, and let's make some changes to the opacity so we can see what's going on behind this gradient. The gradient sits on top of the Background Video.

Another option we have—and we can turn off the gradient for right now—is to set up a solid color as an overlay. Just like the gradient, we can adjust opacity so we can get the visibility just right.

One more note: On touch devices, these styles pass down, but the Background Video is going to display the first frame of the video as a still image.

So let's review. We can add a Background Video to our project which can behave just like a section. We can replace the video through our element settings, and we can style it. Just like a section.

That's the Background Video element.