The video element lets you embed a video, hosted on a third-party site like YouTube or Vimeo, anywhere on your site.
In this lesson, you’ll learn:
- How to add a video
- How to format video settings
- How to set video dimensions
- Other ways to add videos to your site
- How to embed videos using custom code
How to add a video
There are 2 ways to add a video element to your site:
- Open the Add panel and drag and drop a video element onto your Webflow canvas
- Press Command + E (on Mac) or Control + E (on Windows) to open Quick find and search for the video element
How to format video settings
Once you place a video element onto your canvas, you’ll have access to the Video settings where you can add a URL and title. To quickly access the Video settings:
- Double-click the video element
- Select the video element and go to the Element settings panel (D)
Paste in your video URL, add a title if you’d like, and hit Enter/Return. The thumbnail for your video will appear in the video element.
Supported video sources
- YouTube (if you want more control over your YouTube video, try using a YouTube video element)
- KickStarter (all you need to do is paste in the main campaign URL and Webflow will grab the main campaign video)
- TED (multilingual support)
If your video source does not work as expected, please let us know in our Wishlist and we'll try to add it!
Important: Currently, we don’t support uploading video files to the Asset panel and using them in the video element. However, you can upload videos as silent background videos.
How to set video dimensions
The video element respects the dimensions of its parent container (e.g., if you drop it in a div block, it will take up the full width of that div block). 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 Add panel and give the div block a width value and a height value. Now, if you drag your video into this custom div block, it will conform to that size.
Other ways to add videos to your site
You can also add videos to your site by using other elements, including:
- YouTube video
- Background video
- Rich text
- Custom code embed
YouTube video element
The YouTube video element lets you embed a video from a YouTube URL. This element 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.
Background video element
The background video element 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. Background video elements also come with a built-in play/pause toggle so site visitors can play or pause the background video as they wish. Learn more about the background video element.
The lightbox element lets site visitors 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.
Rich text element and rich text field
The rich text element allows you to add videos as well. This is a great way to let your site's content editors add videos to site pages. This is even more powerful when you use it to pull the data from a rich text field in a CMS Collection.
Alternatively, you can also use a video element to dynamically pull in data from a Collection’s video field. Learn more about Collection video fields.
How to embed videos using custom code
You can also add HTML videos using the embed element:
- Go to the Add panel
- Drag an embed element onto the canvas
- Paste your video code (Learn more about video elements in HTML)
- Click Save & close