How videos are optimized in Framer

Framer optimizes how videos are loaded to ensure websites remain fast. However, we currently do not alter or optimize the video file itself in any way.

Loading Optimizations

Rendering videos can strain mobile devices. Delaying video playback makes websites more battery- and data-friendly for your users.

To enable our optimizations:

  1. Ensure every video has a poster. This also improves SEO.

  2. Keep the “Video” component updated in the “Assets” tab under Components in Framer.

update indicator in the assets panel of Framer UI

Our optimizations include:

  1. Lazy loading for videos with posters. Videos are only loaded when close to the viewport, ensuring faster initial load times. For example, a video further down the page loads only when the user is about to see it.

  2. Paused playback for out-of-viewport “GIF-like” videos. Muted, looping, auto-playing videos without controls (essentially acting as GIFs) pause when out of view.

    • This applies to video components with these props: “Muted: Yes” + “Loop: Yes” + “Playing: Yes” + “Controls: Hide.”

How to optimize the video file

  1. Optimize your video content before uploading. Uploaded videos remain unaltered, so a 4K video will be served in full resolution, even on small screens.

    • For adaptive quality based on user screen or network speed, use YouTube or Vimeo components (Insert → “YouTube” or “Vimeo”).

    • To compress videos, try tools like ffmpeg (web version) or Handbrake with “Web Optimized” settings.

  2. Choose a well-supported file format and codec. For example, the AV1 codec is not supported on some older iOS or Mac versions. The H.264 codec with the “.mp4” file extension is universally supported across browsers.

  3. For advanced users: When using ffmpeg, include the flag movflags +faststart to allow videos to play faster in browsers.

Why Framer does not optimize the video file

Video optimization is complex and costly. To do it effectively, we’d need to build infrastructure similar to YouTube or Vimeo from scratch. Instead, we focus on what we do best: helping you create exceptional websites.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.