To add a video to a Framer site, open Insert, go to Media and drag a YouTube, Vimeo or Video component onto the page, then paste the video's link or upload the file. Use YouTube or Vimeo for longer films, because they adjust quality to each viewer's connection, and keep uploaded files for short, muted background loops under about 5 MB. On CMS pages, add a video URL or file field and connect the component to it so every project shows its own film.
Video sells many trades, from production companies and directors to venues and clinics. It also slows sites more than anything else when it is added carelessly.
Which video option should you use?
Based on Framer's video help article and its guide to how videos are optimised:
| Option | Best for | Notes |
|---|
| YouTube component | Longer films, explainers, reels | Adaptive quality; YouTube branding; may set cookies |
| Vimeo component | Portfolio films, client work | Adaptive quality; more control over the player on paid Vimeo plans |
| Video component (upload) | Short background loops, product clips | Served unaltered, so compress first |
| Video component (hosted MP4 link) | Files on your own storage | Same as upload; you manage hosting |
How do you embed a YouTube or Vimeo video?
- Click Insert and open the Media section.
- Drag the YouTube or Vimeo component onto the canvas.
- Paste the video's URL into the component's settings.
- Set the size and position, and choose whether to show controls.
- Publish and test on a phone.
How do you upload your own video?
- Compress the file first; Framer does not compress uploaded videos. Tools such as HandBrake have web-optimised presets.
- Use H.264 video in an .mp4 file, which Framer notes is widely supported.
- Insert a Video component and upload the file.
- Add a poster image, which lets Framer lazy-load the video.
- For a background loop, set it to muted, looping, playing, with controls hidden. Framer pauses these when they are off screen.
- Keep looping files under 5 MB; Framer says most browsers only cache 5 to 8 MB of media, so larger loops are downloaded again each time.
How do you add video to CMS pages?
Framer's help article on video in CMS pages describes two methods:
- Linked video: add a plain text field called Video URL to the collection, paste each item's YouTube, Vimeo or MP4 link, then set the component's URL to that field.
- Uploaded video: add a file field, upload each video, and set the Video component's source to that field.
To hide the video area on items without a video, set the component's visibility to show only when the field is set. This is how portfolio templates give every project its own film.
How do you choose a poster image?
The poster is the still a visitor sees before the video plays, and it shows in place of the video while it loads. Pick a frame that makes sense on its own: a clear shot of the subject, not a blurred transition. Export it at the size the player displays, as a JPEG or PNG, and upload it like any other image so Framer can optimise it. On CMS pages, add an image field for the poster so each project gets its own. A good poster also gives visitors with slow connections something useful to look at.
Should videos autoplay?
Most browsers only allow autoplay when the video is muted. Framer advises avoiding autoplay for videos with sound, since it uses extra bandwidth and visitors may not want it. Silent background loops can autoplay. Give visitors a clear play button for anything with sound.
How do you keep video accessible?
- Add captions to videos with speech. YouTube and Vimeo both support caption files.
- Framer suggests a short text description below videos without audio, explaining what they show.
- Do not rely on video alone for important information such as prices or opening hours.
- Respect reduced-motion settings for decorative loops.
See website accessibility for small businesses.
Does embedded video affect privacy and cookies?
Embedded players can set cookies. Framer's GDPR article lists YouTube among services that may require a cookie banner. YouTube offers a privacy-enhanced mode, and Vimeo has privacy settings; check what each sets. See cookie banners and privacy policies on a Framer site.
What mistakes slow sites down?
- Uploading a 4K file for a small player
- Several autoplaying videos on one page
- Background loops of 20 MB or more
- No poster images
- Using an upload for a long film that should be on YouTube or Vimeo
See Framer site speed and Framer bandwidth limits explained; uploaded video also counts against your monthly bandwidth.
Which templates are built around video?
- Frameline ($49) plays each film in a lightbox from a YouTube, Vimeo or .mp4 link.
- CUT ($49) plays YouTube, Vimeo or self-hosted video on click.
- Colour Cut (free) gives every film its own CMS page with a play button.
- Playground (free) has a showreel and a page per project.
See also video editor portfolio websites and music video director websites.
Related guides: photography portfolio ideas and Framer templates for video editors.
Frequently asked questions
How do I embed a YouTube video in Framer?
Insert a YouTube component from the Media section and paste the video's URL into its settings.
Should I upload videos to Framer or use YouTube?
Use YouTube or Vimeo for longer films, since they adjust quality to the connection. Upload only short, compressed clips or loops.
Does Framer compress uploaded videos?
No. Framer serves uploaded videos unaltered, so compress them before uploading.
How do I add a different video to each CMS item?
Add a Video URL text field or a file field to the collection, then connect the video component on the CMS page to that field.
Why won't my Framer video autoplay?
Most browsers only allow autoplay when the video is muted. Mute it, or let visitors press play.