CMS
Jul 10, 2025
How to Add a Video Component to Framer CMS
I will guide you on how to add YouTube, Vimeo, and self-hosted videos in Framer CMS, and explain how to use the conditional display feature to neatly hide areas without videos.
Uploaded by
Translated by
Contents
Table of Contents
This document addresses the challenges local users face due to a lack of Korean resources when learning Framer. It provides translations of the official blog content into Korean and adds practical information. We hope it offers some assistance to Framer users.
How to Add Videos to a CMS Page
With Framer CMS, you can integrate YouTube, Vimeo, self-hosted, and directly uploaded videos. Once connected to the CMS data, you can dynamically manage and display different videos on each page.
How to Add YouTube, Vimeo, Self-hosted Videos
1. Prepare the CMS Field
Add a Plain text field to the CMS collection and name it Video URL.
2. Enter the Video URL
Input the appropriate video URL into the Video URL field for each CMS item. (Leave blank for items without videos.)
3. Insert the Video Component
On the detailed page canvas, add a YouTube, Vimeo, or Video component from the Insert menu.
Click the + button next to the URL entry field, select Set Variable → Video URL, and each CMS item's video link will be applied automatically.
How to Upload Video Files Directly to the CMS
Create a File Upload Field
Add a File field to the CMS collection. (You can upload files such as mp4 directly.)
Upload the Video File
Upload the appropriate video for each CMS item.
(Note that Framer has file size limits, so prepare files accordingly.)
Insert the Video Component
Add a Video component from the Insert menu and set the Source to Upload.
Press the + button next to the URL and select Set Variable → File to automatically load the uploaded video from CMS.
Hide Empty Spaces if Video is Absent
For CMS items without videos, it's beneficial to set up Conditionals to avoid empty spaces in that area.
After selecting the video component, go to the Visible setting on the right, select Set Variable → File → Is set to ensure the area is only visible when there is a video, providing a clean presentation.
Useful in These Scenarios
Add video reviews to detailed blog pages
Include instructional videos on product detail pages
Embed project demo videos in a portfolio page
Which pages would you apply this feature to?
This content is an adaptation of the Framer official blog's ‘How to add video components to your CMS pages’.
