Developers

Search

Developers

Search

Add video components to your CMS pages

Learn how to add videos to CMS detail pages in Framer and control their visibility dynamically using CMS variables and conditionals.

You can embed videos from YouTube, Vimeo, or your own hosting into CMS detail pages, or upload them directly to your CMS. You can also hide empty video spaces for items without a video.

Options for adding a video

You can add videos to a CMS detail page in several ways:

  • YouTube component

  • Vimeo component

  • Self-hosted video

  • Uploaded video

Adding a YouTube, Vimeo, or self-hosted video

This method lets you display videos hosted externally using a video URL.

  1. Create a Video URL field in your CMS collection. Use the Plain Text field type.

  2. Add video URLs to this field for each CMS item. Leave it blank for items without videos.

  3. Insert a YouTube, Vimeo, or Video component on your CMS detail page. In the URL field, click the + button, select Set Variable, and choose Video URL from your CMS fields.

Framer's YouTube component settings panel showing how to connect a CMS video URL variable. The interface displays the Styles section with Opacity and Visibility controls, followed by the YouTube component settings where a user can select 'Set Variable' from a dropdown menu to connect the 'Video URL' field from their CMS collection.

Uploading a video directly in the CMS

This method stores the video file in your CMS so it can be displayed without external hosting.

  1. Add a File field to your CMS collection. This supports formats such as MP4.

  2. Upload your video file to the CMS. Keep in mind that upload size limits apply.

  3. Insert a Video component on your CMS detail page. Set the source to Upload, click the + button, choose Set Variable, and select File from your CMS fields.

A screenshot of the Framer video component settings panel. The interface shows a Video component with "Upload" selected as the source type. Below this, there's a "File" field with a "Set Variable" button and a dropdown menu for selecting CMS variables. The panel also displays options for poster image, radius, start time, loop settings, and fit mode. This illustrates how to connect a CMS file field to a video component in Framer.

Hiding empty fields

For items without a video, you can use conditionals to keep layouts clean.

  1. In the Styles panel, go to Visible > Set Variable > Video URL/File > Is set.

  2. This ensures the video space is only visible when a video file exists.

Screenshot of Framer's Styles panel showing how to set up conditional visibility for a video component. The panel displays the 'Visible' option with 'Set Variable' selected, showing the 'Video URL' field with the 'Is Set' condition highlighted. This demonstrates how to make a video component only appear when a CMS item has video content available.