Video

Use the video element to embed videos hosted on third-party sites like YouTube or Vimeo.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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:

  1. How to add a video
  2. How to format video settings
  3. How to set video dimensions
  4. Other ways to add videos to your site
  5. How to embed videos using custom code

How to add a video

Video icon thumbnail

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
The four elements that are included in the Media section of the add panel are Image, Video (highlighted), youtube and lottie animation.

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.

The Video settings section in the Element settings panel.

Supported video sources

  • YouTube (if you want more control over your YouTube video, try using a YouTube video element)
  • Vimeo
  • DailyMotion
  • KickStarter (all you need to do is paste in the main campaign URL and Webflow will 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 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.

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.

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

The YouTube settings section in the Element settings panel.

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 Background video settings section of the Element settings panel.

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

Lightbox settings with an example video URL in the Media field.

Rich text element and rich text field

The rich text element allows you to add videos as well. This is even more powerful when you use it to pull the data from a rich text field in a CMS Collection.

The Video element option is highlighted in the Rich text element menu.

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:

  1. Go to the Add panel
  2. Drag an embed element onto the canvas
  3. Paste your video code (Learn more about video elements in HTML)
  4. Click Save & close

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top