Integrate videos dynamically using Webflow’s video feature

The Video feature is a Collection feature that enables you to include videos hosted on a third-party platform (such as YouTube or Vimeo) in the CMS. You can showcase these videos in Collection lists and on Collection pages. The video feature can also be used to refine a Collection list or establish conditional visibility for elements in Collection lists and pages.

Some typical applications of the video feature

• Promotional videos for landing pages
• Product overview videos
• Instructional and tutorial videos for resource pages

Exploring the process

1. Initiating a video feature
2. Incorporating videos into the video feature
3. Linking the video feature to videos
4. Filtering a Collection list through the video feature
5. Configuring conditional visibility with the video feature

Commencing the video feature

You can introduce a video feature to a new or existing Collection. Within Collection settings, select New Feature and then opt for the Video feature.

Similar to any other feature, you have the option to define whether the feature is mandatory or not.

Incorporating videos into the video feature

The video feature accepts video URLs from third-party video platforms like Vimeo and YouTube.

The video feature is optimized for use across all devices, eliminating concerns about mobile responsiveness for you and your collaborators.

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

Linking the video feature to videos

1. Include a video element in a Collection list or on a Collection page
2. Activate the Fetch video from checkbox in the Video Settings menu
3. Associate it with the relevant video feature from the feature dropdown

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

You can disconnect the association by unchecking the “Fetch video from” checkbox under Video Settings.

Retrieve media content for a lightbox using a video feature

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

Filtering a Collection list through the video feature

In certain scenarios, you might opt for a Collection list that exclusively showcases Collection items with a configured video feature. A prime example is when creating a video gallery. To achieve this:

1. Select the Collection list for filtration
2. Navigate to the Settings panel (D)
3. Introduce a Filter under Collection List Settings
4. Choose the relevant video feature in the initial dropdown
5. Select Is set in the second field
6. Click Save

The available filter criteria for use with the video featur are:

• Is Set – identifies Collection items with a video URL configured for this video feature
• Is Not Set – locates Collection items without a video URL set for this link feature

Find out more about filtering Collection lists.

Configuring conditional visibility with the video feature

Similarly, you can establish a conditional visibility rule on a video element in your Collection list or page. This ensures that video elements will only be visible when a video link is configured for a particular Collection item.

1. Select a video element linked to a video feature
2. Access the Settings panel (D)
3. Introduce a Condition (for this element to be visible) under Conditional visibility
4. Select your video feature in the initial dropdown
5. Choose Is set in the second dropdown
6. Click Save

Learn more about conditional visibility.