Optimize background videos

Videos straight from a phone or camera are often 50 MB or more, saved as .mov, and recorded at 4K. As a Section, Hero, or Grid card background, a file like that slows the page down for every visitor, and some browsers can't play .mov at all.

When you pick a video like this, a yellow note appears under the video in the block sidebar, saying what's wrong with it (for example "This video is a QuickTime (.mov) file and is 47.8 MB"). Click Optimize for web to fix it.

What Optimize for web does

  • Makes a new MP4 that every browser plays, at most 1920 pixels wide (1280 for Grid cards), usually a fifth of the size or less. A 50 MB hero video typically comes out at 5–10 MB.
  • Leaves out the sound. Background and card videos always play muted, so the sound is only extra download.
  • Leaves out hidden details the camera saved in the file, such as where it was recorded.
  • Adds a poster image if the video didn't have one. Phones show the poster instead of downloading the video, and every visitor sees it while the video loads.
  • Switches the block to the new video. Save the page as usual to publish the change.

The original stays in the Media Library, untouched, until you choose to delete it.

Keep the tab open

Your own browser does the work; nothing is sent to an outside service. A progress bar shows how far along it is, and most videos take a few seconds to a minute. Keep the editor tab open until you see Optimized: … → …. You can select other blocks in the meantime. Cancel stops it and removes anything it had already uploaded.

Already optimized

If you've optimized a video before, picking the original again shows Use the optimized copy instead, so you don't end up with two copies of the same video.

Deleting the original

Once a block uses the optimized copy, the sidebar checks where else the original is used:

  • Nowhere else: you'll see Delete the original with its size. Click it, then Delete permanently to remove it from the Media Library and free the space. This can't be undone. If the page still has unsaved changes, save it first; the button appears after saving.
  • Somewhere else: the sidebar lists the pages and posts that still use it (each title opens that page's editor) and doesn't offer to delete it. Open each one, select the Section, Hero or Grid card with the video, and click Use the optimized copy, then save. Pages you can't edit are only counted. Once nothing else uses the original, the delete button appears.

Only people who can delete that file from the Media Library see the button.

Browser support

  • Chrome, Edge, and Safari handle every common video, including iPhone videos.
  • Firefox works for most videos but can't read iPhone (HEVC) videos. It says so; open the page in Chrome or Safari instead.
  • In a browser that can't do it at all, the note doesn't appear. Your video still works as before.

If it doesn't work

The block keeps using the original video whenever something goes wrong, and the note explains what happened. If the optimized file is still too big for the site's upload limit, trim the video before uploading it.