How are videos optimized in Framer?

The general answer is: Videos aren't otpimized (Except lazy-loading in some cases – see below)

Optimizing videos is tricky and expensive. If we were to do it properly, we’d have to build the same infrastructure YouTube or Vimeo have, but from scratch. Instead of spending years on that, we prefer to focus on what we do best: helping you create great sites.

Here’s how Framer deals with videos today:

• All video files you upload are kept as-is. This means e.g. that if you upload a 4K video, we’ll serve it in 4K even for mobile users with small screens.

  • If you need to serve videos that adjust their quality based on the user’s screen or on network speed, we recommend using YouTube or Vimeo components (Insert → “YouTube” or “Vimeo”)

• Video files that behave like GIFs are lazy-loaded. Every muted looped playing video without controls (basically, a video that works like a GIF) will only play when it’s visible.

  • This improves page loading speeds. If you have a video somewhere down the page, the browser won’t need to load it in full right away. Instead, it will only buffer the first few seconds – and will load the rest then the video becomes visible and starts playing.

  • This applies to video components with the following combination of props: “Muted: Yes” + “Loop: Yes” + “Playing: Yes” + “Controls: Hide”.

  • This was released in August 2023; if you’re not seeing this behavior, make sure your Video component is up-to-date.