Short answer: use a WebM with VP9 alpha in a <video autoplay muted loop playsinline> element, keep it short and small, and give Safari a still image or an HEVC-with-alpha file.

The HTML

Autoplay only works when the video is muted, and playsinline stops iPhones from opening it full screen:

<video autoplay muted loop playsinline preload="metadata" width="640" height="360" src="presenter.webm"></video>

Setting width and height reserves the space so the page does not jump when the video loads.

Keep it small

  • Short loops of 3–8 seconds are usually enough.
  • Export at the size it is shown: a 720-pixel-wide player does not need a 4K file.
  • For WebM, raising the CRF (for example from 32 to 36) cuts the size noticeably with little visible loss.

Safari

Safari plays WebM but ignores its alpha, so the background shows. Give Safari visitors a transparent PNG still or an HEVC-with-alpha file instead—see transparent video in Safari for a small script that picks the right file.

Respect reduced motion

Some visitors ask their system to reduce motion. Honour it by pausing the video for them:

if (matchMedia('(prefers-reduced-motion: reduce)').matches) document.querySelector('video').pause();

Getting the file

Upload a clip to our video background remover for a transparent WebM, or convert an existing alpha export with the free converters.