Adding background video to your website – Webflow design tutorial

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.


Add a Comment

Your email address will not be published. Required fields are marked *