Use Webflow’s Video element to embed videos hosted on third-party sites like YouTube or Vimeo.
To some, video is just a lot of pictures played in succession. To others, it's one of the best ways to communicate. The Video element embeds a video hosted on a third-party site like YouTube or Vimeo, anywhere on your page.
In this lesson:
Drag and drop a Video element onto your page from the Elements panel or press Command + E (on Mac) or Control + E (on Windows) to open Quick find.
Once you place a video element onto your page, you’ll have access to the video settings. If you cannot see the settings, double-click the video element or select it and press enter to pull up the settings. Paste in the URL of your video, hit enter, and the thumbnail for your video will appear in the video element.
If your video source does not work as expected, please let us know and we'll try to add it!
If you drop the video element in a section, it will take up the full width of that section. Move it to a container, and it will take up the full width of the container. If you move it into a column, it will respect the space available inside that column.
If you want to set a custom width and height to your video, you can create a custom div block. To do that, drag in a div block from the Elements panel. Give it a value for width, and another value for height. Now if you drag your video into this custom div block, it will conform to that size.
There are other ways to add videos to your project in Webflow:
The YouTube video element lets you embed a video from a YouTube URL and gives you all the display options offered by YouTube’s embed feature, including the ability to show related videos from a channel, set a specific start time, show or hide video controls, and more. Learn more about the YouTube video element.
The background video component lets you add motion backgrounds without audio. Unlike the video element which only supports Youtube and Vimeo links, the background video element can accept any video file you upload. Learn more about the background video component.
The lightbox element lets you open a video in a popup modal. Similar to the video element, the lightbox supports YouTube and Vimeo links. Learn more about the lightbox element.
The rich text element allows you to add videos as well. This is a great way to let your site's collaborators (content editors) add as many videos as they want to their pages. This is even more powerful when you use it to pull the data from a rich text field in a CMS collection.
Of course you can also use a Video element to pull in data from a collection Video field.
You can also add HTML videos using the embed element.