Lesson info

Webflow's video element lets you embed a video hosted on a site like YouTube or Vimeo right on your website. This video shows you how to add and customize videos on Webflow sites.

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

Video. To some, it's just a lot of pictures played in succession. To others, it's one of the best ways to communicate.

Whatever your reasoning is for bringing a video into your project, the Video Element embeds a video hosted on a third-party site like YouTube or Vimeo, anywhere on your page.

If you drop the Video Element into a section, it’ll take up the full width of that section. Move it to a container, it’ll take up the full width of the container. And if we move it into a column, it’ll respect the space available inside that column.

For now, let's double-click the video to pull up the Video Settings, and paste in our URL. Hit enter, and automatically, the thumbnail will be generated, and we're good to go.

Now if you want to manually set a width and height to that video, a great way to do that is to create a custom Div Block. So let's head over to our Elements Panel and drag in a Div Block. We can set a value here for width, and we can set another value for height. Now our Div Block has its own size. And if we drag our video in? It conforms to that size.

Now there are other ways to interact with videos in Webflow, and it's worth exploring those, too. Like the Background Video element. Or the Lightbox element, which lets us focus on a video that covers other page content. Or of course taping an iPhone right to the screen.

But for inline videos — elements you want to drop in and interact with right in your project, the Video Element is a great way to go.