Dynamically insert videos with Webflow's video field

The Video field is a Collection field that allows you to add videos hosted on a third-party site (like YouTube or Vimeo) in the CMS. You can display these videos in Collection lists and on Collection pages. You can also use the video field to filter a Collection list or set conditional visibility on elements in Collection lists and pages.

Some common uses for the video field

• Marketing video for landing pages
• Product description videos
• Videos for resource pages (i.e. tutorial and how-to videos)

In this lesson

1. Creating a video field
2. Adding videos to the video field
3. Connecting video field to videos
4. Filtering a Collection list using the video field
5. Setting conditional visibility using the video field

Creating a video field

A video field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Video field.

And as with any field, you can specify if the field is required or not.

Adding videos to the video field

The video field accepts video links from third-party video hosts like Vimeo and YouTube.

The video field will already work across all devices, so you and your collaborators won’t have to worry about mobile responsiveness.

You and collaborators can add more video content on a Collection page through a rich text field.

Connecting video field to videos

1. Add a video element in a Collection list or on a Collection page
2. Check the Get video from checkbox in the Video Settings that appears
3. Connect it to the relevant video field from the field dropdown

You can also access the Video Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).

You can remove the connection by unchecking the “Get video from” checkbox under Video Settings.

Get the media of a lightbox from a video field

1. Add a lightbox to a Collection List or Collection Page
2. In the Lightbox settings, get the media from the video field
   

Filtering a Collection list using the video field

In some cases, you may choose to have a Collection list that displays only Collection items that have a video field set. For example, if you’re creating a video gallery. To do that:

1. Select the Collection list you want to filter
2. Go to the Settings panel (D)
3. Add a Filter under Collection List Settings
4. Select the relevant video field in the first dropdown
5. Choose Is set in the second field
6. Click Save

The filter rules that you can use with the video field are:

• Is Set - looks for Collection items that have a video URL set for this video field
• Is Not Set - looks for Collection items that don’t have a video URL set for this link field

Learn more about filtering Collection lists.

Setting conditional visibility using the video field

In the same way, you can set a conditional visibility rule on a video element in you Collection list or page. This can ensure that video elements will be visible only when a video link is set for a given Collection item.

1. Select an video element connected to a video field
2. Go to the Settings panel (D)
3. Add a Condition (when this element is visible) under Conditional visibility
4. Select your video field in the first dropdown
5. Choose Is set in the second dropdown
6. Click Save

Learn more about conditional visibility.