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 was created to address the difficulties Korean users face due to the lack of Korean resources while learning Framer. We translated official blog content into Korean and added practical information. We hope this will be of some help to Framer users.
How to Add Videos to CMS Pages
In Framer CMS, you can integrate YouTube, Vimeo, self-hosted, and directly uploaded videos. By linking any video to the CMS data, you can manage it dynamically and display it differently on each page.
Adding YouTube, Vimeo, and Self-Hosted Videos
1. Prepare CMS Fields
Add a Plain text field to the CMS collection and name it Video URL.
2. Enter the Video URL
Enter the video URL corresponding to each CMS item into the Video URL field. (Leave blank for items without a video.)
3. Insert Video Component
In the detail page canvas, add a YouTube, Vimeo, or Video component from the Insert menu.
Click the + button next to the URL input box and select Set Variable → Video URL to automatically apply the video link for each CMS item.
Uploading Video Files Directly to CMS
Create a File Upload Field
Add a File field to the CMS collection. (You can directly upload mp4 files, etc.)
Upload Video Files
Upload the video corresponding to each CMS item.
(Note: Framer has file size limits, so be sure to prepare a file of an appropriate size.)
Insert Video Component
Add a Video component from the Insert menu and set the Source to Upload.
Click the + button next to the URL and select Set Variable → File to automatically import videos uploaded to the CMS.
Hide Empty Space When No Video Is Available
For CMS items without a video, it's advisable to set a Conditional Display to prevent the area from remaining as empty space.
Select the video component and under the right-side Visible section, set Set Variable → File → Is set to ensure the area only appears when there is a video, keeping things neat.
Where This Is Useful
Add video reviews to a blog detail page
Insert usage videos on a product detail page
Include project demonstration videos on a portfolio page
Which pages would you like to apply this feature to?
This article is an adapted translation of the Framer official blog's ‘How to add video components to your CMS pages’.
