Back to all lessons
Lesson library


Use Webflow’s Video element to embed videos hosted on third-party sites like YouTube or Vimeo.

This video features an old UI. Updated version coming soon!

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:

  1. Add a Video
  2. Format Video settings
  3. Set Video dimensions
  4. Explore Video elements
  5. Embed Video using custom code

Add a video

Video icon thumbnail

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.

The four elements that are included in the Media section of the add panel are Image, Video (highlighted), youtube and lottie animation.

Format video settings

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.

On the left, the video settings displays a URL input field and a show all settings button. On the right, the YouTube preview of the song "Never gonna give you up" by rick Astley is displayed with a header and paragraph element below.
Supported video sources
  • YouTube (if you want more control over your YouTube video, try using a YouTube video element)
  • Vimeo
  • DailyMotion
  • KickStarter (just paste in the main campaign URL and we'll grab the main campaign video)
  • TED (multilingual support)
  • Wistia
  • Ustream
  • Livestream
  • Twitch
  • Tudou
  • Hulu
  • SproutVideo
If your video source does not work as expected, please let us know and we'll try to add it!
Must know
Currently, uploading your own video files to the Asset panel and using them in the video element is not supported. However, you can upload videos as silent background videos.

Set video dimensions

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.

Three video containers with a video preview, header and paragraph element.

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.

Step one on the left, enter a value of 640 px for the width and 360 px for the height. Step two on the right, drag the video into the div block to replace the placeholder.

Explore video elements

There are other ways to add videos to your project in Webflow:

  • YouTube video
  • Background video
  • Lightbox
  • Rich text
  • Custom code embed

YouTube video element

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 YouTube settings panel displays text input fields for URL, Start at. Three check boxes for Mute, Autoplay and Show player controls under the playback section. Two check boxes for Privacy mode and Limit related videos to the same channel under the Privacy section and a show all settings button.

Background video component

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 background video settings panel displays an upload video button and a Show all settings button.

Lightbox element

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 lightbox settings panel displays a button for an image or video link and a check box for link with other lightboxes.

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 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.

The rich text element bar displays a button for images, videos, custom code, rich media and bulleted or numbered lists.

Of course you can also use a Video element to pull in data from a collection Video field.

Embed videos using custom code

You can also add HTML videos using the embed element.

  1. Add an Embed element to your page
  2. Paste your video code  (Getting Started with HTML5 Video)
  3. Save
Try Webflow — it's free