Transparent video on your website

A transparent video lets an animation float over your page’s background, just like a PNG, but moving. WebM with VP9 is the format for it: small files, full alpha, and supported by Chrome, Edge and Firefox.

The HTML

<video autoplay loop muted playsinline width="1200" height="520">
  <source src="/animation.webm" type="video/webm" />
  <source src="/animation.mp4" type="video/mp4" />
</video>

• autoplay, muted and playsinline are all needed for the video to start by itself on phones.
• loop makes it repeat. See perfect loops for a seamless one.
• Give it width and height so the page doesn’t jump while it loads.

Safari

Safari plays WebM, but not its transparency. Two simple ways around it:

1. An MP4 on your page’s background colour. Render the same animation once more as MP4 with the background colour set to your page’s colour. On a plain background it looks identical.
2. Give Safari the MP4 on purpose. Browsers pick the first source they can play, and Safari can play the WebM (just not its alpha), so send it the MP4 instead:

<script>
  if (/Apple/.test(navigator.vendor)) {
    const v = document.querySelector("video");
    v.querySelector('source[type="video/webm"]').remove();
    v.load();
  }
</script>

That’s exactly what web2vid.com does with the animation at the top of the page.

Make it light

• Keep it short and looping: 4–6 seconds is usually plenty.
• Render at the size it’s shown, not bigger.
• In web2vid’s Advanced settings, a higher CRF gives smaller files (WebM’s default is 30).