How to add video components to your CMS pages

Adding a video component to a CMS detail page will apply the video to all detail pages.

You can customize your pages by adding different videos or choosing not to add one at all. Use CMS variables for your video URLs in combination with CMS conditionals to achieve this.

Here are the options for adding a video to your CMS page:

  • YouTube component

  • Vimeo component

  • Self-hosted video

  • Uploaded video

Adding a YouTube, Vimeo, or self-hosted video

For YouTube, Vimeo, and self-hosted videos, the setup steps are largely identical. Here's how to set it up:

  1. Add a new "Plain text" field to your CMS collection and label it "Video URL".

  1. Add each video URL you want to include in your items. You can leave some spaces blank for now; we can adjust these later using the 'Visibility' property control.

  1. On the Canvas detail page, access the 'Insert' menu at the top left corner and add a YouTube, Vimeo, or Video component. Notice the '+' button preceding the URL field. This button enables you to add variables. Click it to 'Set Variable' and select 'Video URL' from your CMS field, as set up in step 1.

Uploading a video directly in the CMS

To upload a local file from your computer to the CMS, follow these steps:

  1. Add a "File" field to the CMS to allow users to upload files with extensions like mp4.

  1. Upload your file. Note that file upload limitations apply; see our pricing page for details.

  1. On the Canvas detail page, go to the Insert menu at the top left corner and add a Video component. Select "Upload" as the Source and click the "+" button to add Variables. Set a Variable and choose "File" from your CMS field.

Hide empty fields where needed

To fix the space on Detail pages without a video, use Conditionals for the Visibility property. In 'Styles', go to Visible > Set Variable > File > Is set. This condition makes the space visible when a 'File' is set and hides it when there isn't one.