How do I add a video field in Webflow?

Add a video field to the Collection

A video field stores a link to a video hosted somewhere else, such as YouTube or Vimeo. It is a Collection field, not a video you paste once onto a static page. You can show the video in a Collection list and on a Collection page. You can also filter a list with it, or show and hide elements when the field is set.

Open the CMS panel. Hover the Collection and click the settings icon, or open the Collection and click Settings. Click New Field and choose Video. As with any field, you can mark it required or leave it optional. Help text is available when you add a field if editors need a reminder of which URL belongs here.

Webflow's examples for this field are a marketing video on a landing page, a product description video, and tutorial videos on resource pages. A blog can use one video field named Walkthrough. Each post then holds at most one URL in that field. More than one video inside the article body is a different tool: collaborators can add more video content on a Collection page through a rich text field.

The help article says the video field already works across devices, so you do not keep a separate mobile URL in a second field.

Example: the Tutorials Collection needs a video on some lessons and not on others. Add a video field named Lesson video and leave it optional. Lessons without a recording stay valid. The next section is where the URL goes.

Paste a public YouTube or Vimeo URL

Open a Collection item and paste the video link into the video field. The field accepts video links from third-party hosts such as Vimeo and YouTube. Save the item.

Use the public URL of the video, not a private or unlisted link that the player cannot embed. If the host blocks embedding, the field can reject the URL even when the link plays in a browser tab.

A single video on a static page, such as the homepage, does not need this field. Place a video element on that page and paste the URL there. Use the video field when each Collection item has its own video.

Example: a lesson named Checkout tour uses the YouTube URL for that recording in Lesson video. A lesson named Pricing notes leaves Lesson video empty. Both items can stay published. Only the first one has a video to connect.

Connect a video element or a lightbox

The connection has to live where the Collection item is in scope. That is inside a Collection list, or on the Collection page for that item.

Add a video element in the Collection list or on the Collection page. In the Video settings that appear, check Get video from. Choose the video field from the dropdown. You can also open Video settings by selecting the element and clicking the settings icon next to its label, or by opening the Settings panel.

To remove the connection, uncheck Get video from under Video settings. The element stops reading the field.

A lightbox can use the same field. Add a lightbox to a Collection list or a Collection page. In the Lightbox settings, get the media from the video field.

Example: on the Tutorials Collection page, add a video element under the title, check Get video from, and choose Lesson video. The Checkout tour page plays that recording. Pricing notes has an empty field, so there is nothing for the player to load until you paste a URL and publish the item.

Show the player only when a URL is set

A Collection list can show only items that have a video, which is the pattern Webflow describes for a video gallery. Select the Collection list, open the Settings panel, and add a filter under Collection list settings. Select the video field, choose Is set, and click Save. Is not set does the opposite: it looks for items that do not have a video URL in that field.

You can also show or hide an element based on the video field, as long as the element is inside a Collection list or on a Collection page. Select the element. Go to Element settings, Visibility. Click the plus icon, choose the video field, and choose a rule such as Is set. Set Visibility to Visible. Set Else, Visibility, to Hidden. Click off the modal or press Esc to save the conditional.

Example: the lesson template always has a heading. The video element uses a conditional so it is visible when Lesson video is set and hidden when it is not. Pricing notes then shows the title and the article without an empty player. A gallery page uses the Is set filter so only lessons with a URL appear.

Fix an invalid video URL

If you get an invalid video URL error, Webflow lists four checks. Confirm that the video is hosted on a supported source. Make sure the video is publicly available and that embedding is allowed, if that applies. Check that the URL is correct, and try copying and pasting it again. Add ?force=true to the end of the video URL in Webflow to force a re-crawl. Webflow's example is a youtu.be link with ?force=true on the end. If a re-crawl resolves the issue, remove ?force=true from the URL.

Publish the Collection items after the URL is accepted, then open the Collection page. The player should use the connected field. If every item shows the same video, Get video from is off and the element still has a URL typed on the element itself. Check Get video from and choose the field again.

If the player is missing only on lessons without a URL, that is the empty field, not a broken connection. Paste a public link, or keep the conditional that hides the player when the field is not set.