Safari Not Supporting WebM Animation Background – How to Fix?

[Raviteja (Ravi)]

Hi everyone,

I’m using a WebM animation file as a background on my Webflow site, and it works perfectly in Chrome and other browsers. However, in Safari, the animation background doesn’t play — it just shows a blank or fallback background.

Is there a recommended workaround for this?
Should I include a fallback animation format like MP4? If so, how can I set it up correctly in Webflow?

Any guidance or best practices for cross-browser animation compatibility would be really helpful.

How it looks on Safari:

How it looks on Chrome:

Thanks in advance!

Here is my site Read-Only: Webflow - AI-Powered Growth for Subscription Businesses | VOZIQ AI

[VeilAgency (Serban Draghici)]

Hi Ravi,

Really dig your Webflow site
Regarding the WebM and Safari, Safari does support the WebM format, but with some caveats. Modern versions of Safari on macOS and iOS (specifically, versions 14.1 and later) have native WebM support. However, older versions of Safari may require manual installation of codecs or rely on plugins to play WebM files.

I would use the Vdeo Background element instead of Code Embed.
I usually add mp4, and Webflow does the rest, converts / encode it to the right formats.

Try that and let me know if that works for you.

Thanks

[Raviteja (Ravi)]

Hi Serban, I used the code but it’s not working. I’ve sent you the code can you please check it and rewrite it properly if it possible

code

External Media Your browser does not support the vdeo tag.

Thanks!