How to add video components to your CMS pages

In this guide, we explain how to add videos to CMS detail pages in Framer and customize their visibility dynamically using CMS variables and conditionals.

Options for adding a video

  • YouTube component

  • Vimeo component

  • Self-hosted video

  • Uploaded video

Adding a YouTube, Vimeo, or self-hosted video

  1. Create a “Video URL” field:

    • Add a “Plain text” field to your CMS collection and label it “Video URL”.

      “Plain text” field in a CMS collection


  2. Add video URLs:

    • Populate the “Video URL” field with the desired video links. Leave blank spaces for items without videos.

      A populated “Video URL” field


  3. Insert a video component:

    • On the Canvas detail page, open the Insert menu. Add a YouTube, Vimeo, or Video component.

    • Click the “+” button next to the URL field, select Set Variable, and choose “Video URL” from your CMS fields.

    Shows the “+” button next to the URL field.


Uploading a video directly in the CMS

  1. Add a “File” field:

    • In the CMS collection, add a “File” field to allow uploads for file formats like mp4.

  2. Upload your video file:

    • Upload your local video file to the CMS. Note that upload size limitations apply.

      File field in a CMS collection.

  3. Insert a video component:

    • On the Canvas detail page, add a Video component from the Insert menu.

    • Select “Upload” as the Source. Click the “+” button to add Variables, select Set Variable, and choose “File” from your CMS field.

      The “+” button to add Variables.

Hide empty fields where needed

For items without a video, use Conditionals to hide the empty space:

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

  2. This condition ensures the video space is visible only when a video file is present, keeping your layouts clean.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.