Anyone using Webm animation?

Lounge
1

It’s supposed to be good… transparency allowed

Exploring this over animated gif cartoons

256 color gifs - don’t match my website backgrounds and I hate the off colored box around the animated gif

I had always wanted a cartoon mascot to point out pro tips or other important content…

trumpy

2

Well - ahead of the curve… too far ahead.

Safari doesn’t support webm animation - YET

Downloaded: stutter encoder and set it up - made the webm (btw - shows as a warning triangle in elements) then - no go

Screenshot 2026-03-17 at 7.43.41 AM
Screenshot 2026-03-17 at 7.43.41 AM2792×1554 451 KB

Kind of disappointed…

3

WebM is a video format, and according to caniuse.com Safari has supported it for a little while now. It does need to be placed in a <video> tag rather than an <img> tag, so that might be some of the issue you’re seeing. WebP is another image format that’s quite widely used these days which also supports animation and alpha-transparency.

4

Yes :+1: I tried a custom html box…

IMG_9274
IMG_9274943×350 52.2 KB

But it did not play in preview…

Did not try uploading it to server - as it did not work in preview…

Any reason it’s not playing? @dan

I do get the yellow/orange triangle of death :slight_smile: next to the file in resources….

5

Chat GPT said No - it won’t play in Safari

Here is Gemini Take:

Yes, but with a massive catch! Safari will play a WebM video, but it will not read the transparency (alpha channel).
If you load your transparent WebM into Safari on an iPhone or Mac, the browser will strip out the transparency and replace it with a solid black background.
Here is exactly how the web design world handles this frustrating Safari quirk:
The Apple Standard: HEVC (H.265)
Apple insists on using its own codec for transparent video. To get a perfectly transparent background in Safari, the video must be encoded as an HEVC (H.265) file.
Because of this browser war, the modern standard is to export two tiny video files for your website:

  • WebM (VP9): For Chrome, Firefox, and Edge.
  • MP4 (H.265): For Safari and iOS devices.
    How to Make the Safari Version in Shutter Encoder
    Since you already have Shutter Encoder open, creating the Apple-friendly version takes just a few seconds:
  • Drop your original 480x480 animation into the app.
  • Under the “Choose function” dropdown, select H.265 (instead of VP9).
  • On the right panel, under “Advanced features,” check the box for Enable alpha channel. (Note: If you don’t see this option, look at the bottom toolbar and ensure “Hardware acceleration” is checked, as it is often required to unlock the H.265 alpha channel).
  • In the bottom right corner, ensure the output extension is set to .mp4 or .mov.
  • Check your Scale box, type in 240x240 to shrink it, and hit Start.
    The “Bulletproof” HTML Code
    Now that you have both files (for example, trumpy.webm and trumpy.mp4), you just stack them inside your HTML

(Pro-tip: Notice the codecs=“hvc1” part on the MP4 line. That exact spelling is crucial. If you leave that out, Safari will sometimes panic and refuse to play the file.)
Would you like to know how to add a static PNG image inside that same block of code to act as a final safety fallback for extremely old browsers?

6

Wow :exploding_head: pain…

I tried to stay away from h.265

Thoughts?