How to Add a Video to Framer

Video isn’t optional anymore. Websites with video keep visitors around 88% longer than sites without it. Landing pages with video see conversion rates jump to 4.8% compared to 2.9% for text-only pages — and having a video on your page makes it 53% more likely to rank on page one of Google.

If you’re building on Framer, you’re already ahead. Framer makes adding video surprisingly fast — whether you’re uploading a local file, embedding from YouTube, or pulling in Vimeo. This guide covers every method, step by step, so you can get your video live and working in minutes.

Why Video Belongs on Your Framer Site

Before jumping into the how, here’s why this matters:

91% of consumers have watched an explainer video to learn about a product or service. 83% of marketers say video directly increased the time people spend on their pages. And B2B video content generates 1,200% more shares than text and image content combined.

Your Framer site might look stunning. But if it doesn’t have video, it’s leaving engagement — and conversions — on the table.

What You Need Before You Start

• A Framer account (free or paid)
• Your video file (MP4, MOV, or WebM) or a YouTube/Vimeo URL
• The page where you want the video to appear

That’s it. No coding required.

Method One — Upload a Video File Directly

This is the most straightforward option. Great for hero sections, product demos, background loops, and portfolio showcases.

Step by step:

Open your Framer project and navigate to the page where you want the video.

Click the Insert button in the top-left corner of the interface.

Scroll down to the Media section and select Video.

Drag the video component onto your canvas and position it where you want it — under a heading, inside a section, or as a full background element.

With the video component selected, look at the right-side properties panel. Under the Video field, click Upload and choose your file from your computer.

Framer accepts MP4, MOV, and WebM formats and automatically handles optimization on the file level.

Once uploaded, adjust the playback settings to fit your design:

• Autoplay — plays the video immediately on page load. Note: most browsers require the video to be muted for autoplay to work. Enable the Muted toggle if you’re using this.
• Loop — keeps the video cycling continuously. Ideal for ambient background clips.
• Controls — shows or hides playback controls (play/pause, scrub bar, volume, picture-in-picture).
• Start Time — lets you specify exactly where playback begins.
• Poster/Thumbnail — upload a cover image that displays before the video plays. Google and other search engines use this image for previews in search results. The poster should be at least 60 x 30 px.

Sizing options for how the video fits its container:

• Cover — fills the full container while preserving aspect ratio. Parts may be cropped. Best for full-screen backgrounds.
• Contain — scales the video to fit inside the container without cropping. Best for embedded clips.
• Fill — stretches to fill container dimensions. May distort aspect ratio.
• Scale-down — similar to Contain, but won’t enlarge small videos.

To maintain proportions while resizing, hold Shift + Option as you drag the corners.

Method Two — Embed a YouTube Video

YouTube is the go-to for public-facing content — product explainers, tutorials, testimonials, case studies. This method requires zero file management and takes under 30 seconds.

Step by step:

Click Insert in the top-left corner.

Scroll to the Media section and select the YouTube component (not the generic Video component).

Drag it onto your canvas.

In the right-side panel, paste your YouTube video URL directly into the URL field.

The video will appear embedded on your canvas immediately.

Important: Standard YouTube watch page URLs work here (for example, youtube.com/watch?v=…). Direct file URLs won’t work with this component.

You can customize corner radius, sizing, and aspect ratio from the properties panel. You can also set a custom poster image to replace YouTube’s default thumbnail.

One thing to keep in mind: YouTube videos will show YouTube branding and suggested videos after playback ends. If brand consistency matters more than reach, Vimeo or direct hosting gives you cleaner control.

Method Three — Embed a Vimeo Video

Vimeo is the preferred choice for polished presentations, client work, and any situation where you want cleaner playback without competing thumbnails or platform branding.

Step by step:

Click Insert in the top-left corner.

Scroll to the Media section and select the Vimeo component.

Drag it onto your canvas.

Paste your Vimeo video URL into the URL field in the right panel.

Your video appears embedded and ready to play.

The same customization options apply — corner radius, sizing, poster image — and Vimeo gives you additional privacy controls on the Vimeo side (password protection, domain-level restrictions) that YouTube doesn’t offer natively.

Method Four — Use a Direct Hosted Video URL

If your video is already hosted somewhere — your own server, Amazon S3 with public access, or a CDN — you can point Framer directly to the file URL instead of uploading.

Step by step:

Insert the Video component (not YouTube or Vimeo).

In the properties panel, go to the Video field and select URL instead of Upload.

Paste the direct link to your video file. This must be a link that ends in .mp4, .webm, or .mov. Links to watch pages won’t work here.

Hit Enter and your video loads on the canvas.

This method gives you full control over where your video lives, useful for teams managing media assets outside of Framer.

Method Five — Add Video to CMS Pages

If you’re running a blog, portfolio, or any content that uses Framer’s CMS, you can add video components to your collection detail pages and control their visibility dynamically.

Step by step:

Open a CMS collection in Framer and navigate to the detail page layout.

Insert a Video component onto the canvas in your desired position.

In the properties panel, connect the video source to a CMS field. You can map it to a URL field in your collection so each item has its own video.

Use Framer’s conditional visibility feature to show or hide the video based on whether a CMS field is filled in — useful when some posts have videos and others don’t.

This approach lets you scale video across dozens or hundreds of pages without manually placing each one.

Optimizing Your Framer Video for SEO and Performance

Getting the video live is step one. Making it work for search rankings and load speed is step two.

Always set a poster image. Google uses this as the preview thumbnail in search results and rich snippets. A clear, high-quality image here can significantly improve click-through from search. Minimum size is 60 x 30 px, but larger is better.

For videos without audio, add a text description. Place a brief description below the video explaining its content. This serves accessibility needs and gives search engines more context to crawl.

Use muted autoplay for background videos. Chrome, Safari, and Firefox all require muted video for autoplay. If you skip the Muted toggle and enable Autoplay, the video simply won’t play in most browsers.

Keep background loops short. Framer optimizes video loading on the delivery side, but the video content itself isn’t compressed by Framer. Keep looping background clips under 15 seconds and compress them before uploading. Bloated video files slow your page down, and every second of delay costs you conversions.

Use the right fit mode for the job. Cover for backgrounds. Contain for embedded demos. Scale-down for small thumbnails you don’t want stretched.

Common Problems and How to Fix Them

Video won’t autoplay Autoplay requires the video to be muted. Enable the Muted toggle in the properties panel. Some browsers also require a user interaction before any media plays, so consider triggering playback on click instead.

Video URL isn’t loading Direct URL mode only accepts links that point directly to a video file (ending in .mp4, .webm, or .mov). YouTube and Vimeo watch page URLs won’t work with the native Video component — use the dedicated YouTube or Vimeo components for those.

Video looks stretched or cropped Adjust the fit mode in the properties panel. Switch between Cover, Contain, Fill, and Scale-down until the framing looks right. Hold Shift + Option when resizing to maintain the aspect ratio.

Video isn’t showing in preview or publish Make sure the video file uploaded completely before publishing. For URL-based videos, check that the host URL is publicly accessible and doesn’t require authentication.

Conclusion

Adding video to Framer is one of the highest-leverage things you can do for your site. The numbers back it up — 80% higher conversions on landing pages, 88% more time on page, and a 53% better shot at ranking on Google’s first page.

The process itself is straightforward: use the native Video component for direct uploads, the YouTube or Vimeo components for platform-hosted content, or URL mode for externally hosted files. Set your poster image, get the fit mode right, and mute anything that autoplays.

Your Framer site can now tell its story through video. The next step is making sure the right people are seeing it — and that when they do, there’s a systematic pipeline ready to turn that attention into meetings.

That’s where Salesso comes in. We build complete outbound lead generation systems across LinkedIn, cold email, and cold calling — so your site works harder while your pipeline grows on autopilot.