---
title: "How to Add Video to a Framer CMS Collection"
description: "Framer CMS has no dedicated 'video' field type — here's the exact working pattern for connecting videos to CMS items, plus the gotchas to avoid."
canonical_url: "https://framerhub.io/blog/add-video-to-framer-cms"
last_updated: "2026-11-20T00:00:00.000Z"
---

Search "Framer CMS video field" and you'll find a Reddit thread asking essentially "can I even do this?" The honest answer: Framer CMS doesn't have a dedicated video field type the way it has an image field. But connecting video to CMS items is a solved, documented pattern once you know the actual mechanism — here's exactly how it works.

## Why There's No Native "Video" Field

Framer's CMS field types cover text, rich text, images, links, references, and a few structured types (color, date, boolean), but video isn't one of them. This isn't an oversight so much as a reasonable design choice: video needs a player component with its own settings (controls, autoplay, aspect ratio), which doesn't map cleanly onto a simple field the way an image does. Instead, Framer's actual pattern connects a **native Video component on your page** to a **Link or Text field on your CMS collection** that stores the video's URL.

## Step 1: Add a URL Field to Your Collection

In your CMS collection, add a field to hold the video source:

- **Link field** — the cleanest option if every item's video lives at a URL (a YouTube or Vimeo link, or a direct link to a hosted MP4).
- **Text field** — works just as well if you'd rather store it as plain text, especially if you're also storing additional metadata (like a video title) in the same field structure.

Either works; pick based on what fits your existing collection field conventions, since Framer doesn't enforce one over the other for this pattern.

## Step 2: Connect a Video Component on Your Page Template

On your CMS collection page template (the page Framer generates per item), drop in Framer's native Video component. Then:

1. Select the Video component.
2. In its property panel, look for the option to connect its source to a CMS field rather than a static, manually-set URL.
3. Point it at the Link/Text field you created in Step 1.

Once connected, every item in the collection renders its own video automatically based on that item's field value — you set this up once on the template, not per item.

## Step 3: Decide Between Hosted Links and Uploaded Files

**Hosted video links (YouTube, Vimeo, a video CDN)** are the more common and reliable pattern for CMS-driven video, for a few practical reasons:

- Playback, compression, and adaptive streaming are handled by the hosting platform, not your Framer site's own bandwidth.
- Thumbnails, captions, and player controls come with the embed, saving you from building that UI yourself.
- Page weight stays manageable even with many CMS items containing video, since you're embedding a reference, not the actual file.

**Directly uploaded video files** are supported by Framer, but for CMS-driven collections with many items, this scales worse — every item's video adds real weight to your project and site, and you lose the adaptive streaming and built-in player UI that a hosting platform provides. Reserve direct uploads for a small number of hand-placed videos (a hero background loop, for example) rather than a CMS collection with dozens of video-bearing items.

## Handling Video in List Views vs. Detail Pages

This is the part most tutorials skip, and it's where real projects run into performance trouble. If your CMS collection powers both a list view (a grid of items) and individual detail pages:

- **On the list view, don't autoplay every item's video simultaneously.** Loading and playing a dozen embedded videos at once on a listing page is a guaranteed performance problem, especially on mobile. Show a static thumbnail per item instead, and only load/play the actual video on click or on the individual detail page.
- **On the detail page, autoplay (muted) is more reasonable** since only one video is loading at a time and the user has explicitly navigated to that specific item.
- **Set a consistent aspect ratio and sizing on the Video component in your template**, not per item, so your grid or list doesn't have inconsistent video dimensions jumping between rows as content loads.

## Common Problems and Fixes

- **Video doesn't show for some items but works for others.** Almost always a malformed or empty URL in that specific CMS item's field — check the raw field value directly, not just how it renders.
- **Video looks stretched or cropped inconsistently across items.** Source videos with different native aspect ratios will render inconsistently inside a fixed-size component. Standardize your source video dimensions before upload/embedding, rather than fixing it per item after the fact.
- **Autoplay doesn't work on some browsers.** Most modern browsers block autoplay with sound — if autoplay matters for your use case, make sure the video is also set to muted, which is required for autoplay to work reliably across browsers.
- **Slow-loading pages with several videos.** Switch to a thumbnail-first, click-to-play pattern rather than loading every embedded player on page load.
- **The video player doesn't match your site's design.** Native embeds from YouTube or Vimeo come with their own default player chrome, which can look visually out of place against a carefully designed site. A custom code component wrapping the embed can restyle the surrounding container and controls, though the core player UI from the hosting platform itself generally can't be fully restyled without violating that platform's embed terms.

## A Real Example: Real Estate Listing Walkthroughs

To make this concrete: say you're building a real estate listings site where each property has a walkthrough video. The setup looks like this:

1. Add a `walkthrough_video_url` Link field to your Listings collection.
2. On the listing detail page template, drop in a Video component and connect its source to that field.
3. For the listings grid/list view, use a static image (your existing listing photo field) rather than the video, and let the video only appear on the individual listing's detail page.
4. Confirm every agent or content editor entering listings knows to paste a direct, working video URL into that field — a broken or private-access video link is one of the most common support issues with this pattern, and it's worth a quick note in your CMS field description reminding editors what format is expected.

This same structure applies directly to product demo videos, testimonial clips, or course lesson previews — the field and component setup doesn't change, only the content itself, the surrounding page layout, and the specific copy around each video does.

## Custom Video Components for More Control

If the native Video component's settings don't give you enough control — custom controls, specific loading behavior, or a play button styled to match your brand rather than the platform default — a code component gives you that flexibility while still connecting to the same CMS field pattern described above. Our [component library](/components) includes several media-focused components built with exactly this kind of custom control in mind, useful if the native component's defaults feel too generic for a client project.

## When You Need More Than One Video Per Item

If your actual need is a video *gallery* per CMS item — multiple clips per property listing, multiple demo videos per product — that's a meaningfully different problem than a single connected video field, and trying to force it into one Link field with delimited values gets fragile fast. This is exactly the use case [Gallery Kit](/plugins/gallery-kit) is built for: lightbox, masonry, and carousel layouts wired directly to a CMS collection, supporting multiple media items per entry without custom field hacking. For the broader gallery setup beyond video specifically, our [Framer CMS gallery guide](/blog/framer-cms-gallery-guide) covers the full pattern.

## FAQ

**Does Framer CMS have a dedicated video field type?**
No. There's no native "video" field type in Framer CMS collections. Instead, you store a video URL in a Link or Text field, then connect a native Video component to that field on your CMS-driven page template.

**Can I upload video files directly to a CMS item?**
Framer supports uploading video files, but the more common and reliable pattern for CMS-driven content is referencing a hosted video URL (YouTube, Vimeo, or a video hosting service) rather than storing large video files directly per CMS item.

**Why does my video look different across CMS items?**
This usually comes from inconsistent source video aspect ratios or resolutions. Standardize your video specs before upload, and make sure your Video component's sizing settings are consistent across the collection template, not set per item.

**Will lots of videos in a CMS list slow down my page?**
Yes, if every item autoplays or loads a full video player at once. Use thumbnail-first patterns (load a static image, play video on click or hover) for list views, reserving autoplay for single-item detail pages.

**What if I need a video gallery, not just one video per item?**
That's a different, bigger problem than a single video field — you're building a media gallery with lightbox or carousel behavior, which is what Gallery Kit is built for.