Optimize Videos for Framer with FFmpeg Micro

Framer doesn't process video. Drop a 200MB ProRes file into a Framer project and that's exactly what visitors download. No compression, no format conversion, no codec negotiation. Your marketing site loads like it's 2008.

Framer's own documentation tells you to run FFmpeg commands before uploading. That's the right advice. But most Framer users are designers and founders, not people who want to install a command-line tool and memorize codec flags.

> TL;DR: Convert your video to H.264 MP4, compress it with CRF, and apply the +faststart flag before uploading to Framer. FFmpeg Micro's REST API does all three in one call. No FFmpeg installation required.

Why Framer Can't Handle This for You

Framer is a design tool, not a media pipeline. When you upload a video, Framer stores it on its CDN without any transcoding. That means whatever codec, resolution, and file size you upload is what every visitor gets.

This creates three problems.

File size. Framer caches assets in the browser, but most browsers cap that cache at around 5 MB per resource. A 50 MB hero video won't stay cached. Every repeat visit triggers a fresh download.

Codec compatibility. Safari won't play WebM. Older browsers choke on HEVC. If you shot on an iPhone (HEVC by default) or exported from Premiere as WebM, a chunk of your audience sees a broken player.

Progressive download. Without the faststart flag, MP4 files store their metadata (the moov atom) at the end of the file. The browser has to download the entire file before it can start playback. On a landing page, that delay kills conversions.

The Three Things Every Framer Video Needs

Before uploading any video to Framer, you need to do three things:

The FFmpeg CLI Way

If you have FFmpeg installed locally, this single command handles all three:

ffmpeg -i input.mov -c:v libx264 -crf 23 -c:a aac -movflags +faststart output.mp4

That works. But it requires installing FFmpeg, knowing the right flags, and running it manually every time you want to update a video on your Framer site. If you're processing multiple hero sections, testimonial clips, or product demos, it gets old fast.

The API Way (FFmpeg Micro)

FFmpeg Micro is a hosted REST API that runs FFmpeg in the cloud. You send it a video URL, tell it what you want, and get back a processed file. No binary to install. No server to manage.

Simple mode uses presets:

curl -X POST https://api.ffmpeg-micro.com/v1/transcodes \
  -H "Authorization: Bearer API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "inputs": [{"url": "https://example.com/raw-hero.mov"}],
    "outputFormat": "mp4",
    "preset": {"quality": "high", "resolution": "1080p"}
  }'

Advanced mode gives you full control over codec, CRF, and faststart:

curl -X POST https://api.ffmpeg-micro.com/v1/transcodes \
  -H "Authorization: Bearer API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "inputs": [{"url": "https://example.com/raw-hero.mov"}],
    "outputFormat": "mp4",
    "options": [
      {"option": "-c:v", "argument": "libx264"},
      {"option": "-crf", "argument": "23"},
      {"option": "-movflags", "argument": "+faststart"},
      {"option": "-c:a", "argument": "aac"}
    ]
  }'

The API returns a job ID. Poll the status endpoint until it completes, then grab the download URL.

Here's the full flow in JavaScript:

const API_KEY = "your-api-key";

// 1. Start the transcode
const job = await fetch("https://api.ffmpeg-micro.com/v1/transcodes", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    inputs: [{ url: "https://example.com/raw-hero.mov" }],
    outputFormat: "mp4",
    options: [
      { option: "-c:v", argument: "libx264" },
      { option: "-crf", argument: "23" },
      { option: "-movflags", argument: "+faststart" },
      { option: "-c:a", argument: "aac" },
    ],
  }),
}).then((r) => r.json());

// 2. Poll until complete
let status = job.status;
while (status !== "completed" && status !== "failed") {
  await new Promise((r) => setTimeout(r, 5000));
  const check = await fetch(
    `https://api.ffmpeg-micro.com/v1/transcodes/${job.id}`,
    { headers: { "Authorization": `Bearer ${API_KEY}` } }
  ).then((r) => r.json());
  status = check.status;
}

// 3. Get the download URL
const download = await fetch(
  `https://api.ffmpeg-micro.com/v1/transcodes/${job.id}/download`,
  { headers: { "Authorization": `Bearer ${API_KEY}` } }
).then((r) => r.json());

console.log("Download your optimized video:", download.url);

Upload the resulting file to Framer and you're done. Compressed H.264 MP4 with faststart, ready for every browser.

Common Framer Video Problems (and Fixes)

Video won't play in Safari. Safari doesn't support WebM or VP9. Convert to H.264 MP4 using the options above. This is the single most common Framer video complaint.

Hero video loads slowly. Two culprits: the file is too large, or it's missing the faststart flag. Compress with CRF 23 and make sure -movflags +faststart is in your options. For above-the-fold hero videos, aim for under 5 MB.

Video looks blurry after upload. Framer didn't compress it. You did, probably too aggressively. Lower the CRF number (18-20 gives near-lossless quality at a larger file size) or bump the resolution preset to 1080p.

File is still too large after compression. Drop the resolution. A 720p video at CRF 23 is often under 3 MB for a 15-second clip. On a marketing site, most visitors won't notice the resolution difference on a background video.

FAQ

Does Framer compress video automatically?

No. Framer serves videos exactly as uploaded. There is no server-side transcoding, compression, or format conversion. You need to optimize video files before uploading them to your Framer project.

What video format works best for Framer sites?

H.264 MP4 with the faststart flag is the best format for Framer. It plays in every major browser including Safari on iOS, supports progressive download for fast playback, and compresses well for web delivery.

Why won't my video play in Safari on a Framer site?

Safari does not support WebM or VP9 video codecs. If your video was exported as WebM or uses HEVC without a fallback, Safari will show a blank player or an error. Converting to H.264 MP4 fixes this across all browsers.

Can I optimize video for Framer without installing FFmpeg?

Yes. FFmpeg Micro is a cloud API that runs FFmpeg remotely. You send a video URL via HTTP request and receive a compressed, converted file back. No installation, no command line, no server. A free tier is available to get started.

What CRF value should I use for Framer hero videos?

CRF 23 is a good default for web video. It produces a significant file size reduction with minimal visible quality loss. For hero sections where quality matters more, try CRF 18-20. For background videos where some softness is acceptable, CRF 28 keeps files very small.