How to Use Transparent Videos in Webflow (Cross‑Browser Guide)

September 29, 2025

Transparent videos can add a polished, cinematic feel to hero sections and product showcases. The good news is they’re easier to implement than you might expect. In this guide, you’ll create a transparent video that works across modern browsers using WebM with alpha for Chrome and HEVC with alpha for Safari, then embed it in Webflow. You’ll need an animation with an alpha background, exported as a PNG sequence from your 3D or motion tool of choice, FFmpeg installed on your machine, and basic terminal familiarity. Keeping the animation short and loopable will help control file size and improve performance.

1. PNG Sequence to WebM

Start by exporting your animation as a PNG sequence to preserve transparency. Use a consistent, padded filename format such as filename_0001.png through filename_0120.png. If needed, batch rename your files so their numbering is predictable; FFmpeg relies on a strict numeric pattern to ingest frames in order.

Place the sequence in a folder, then open your terminal in that folder to run the commands below.

For Chrome, generate a transparent WebM. Run this command, adjusting the framerate, input mask, and output name as needed:

ffmpeg -framerate 30 -i filename_%4d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

‍

This tells FFmpeg to read a four-digit image sequence at 30 frames per second, encode using VP9, and use a pixel format that supports alpha (yuva420p), producing a WebM file with transparency.

2. PNG Sequence to HEVC

Safari does not support alpha in WebM, so you will provide a fallback using HEVC with alpha. First, create a ProRes 4444 MOV with alpha, so open the terminal or use the same terminal you’ve already used and place the next command:

ffmpeg -framerate 30 -i filename_%4d.png -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 120 output-safari.mov

‍

On macOS, convert that MOV to HEVC with alpha via the system encoder. Right-click output-safari.mov, choose “Encode Selected Video Files…”, select HEVC for the format, pick an appropriate resolution such as “HEVC 1080p,” check “Preserve Transparency,” and continue. This yields an HEVC file with an alpha channel that Safari can play.

3. Host video and we are ready

Host both files on a reliable CDN or static host. Amazon S3 and CloudFront work well, but any host that serves files quickly with correct headers will do. Once uploaded, copy the public URLs of your output.webm and the HEVC-encoded video. In Webflow, add an Embed component and paste the following HTML, replacing the src values with your hosted URLs:

<video width="100%" height="100%" autoplay loop muted playsinline>
  <source 
    src="https://your-cdn.com/output-safari.mov" 
    type='video/mp4; codecs="hvc1"'>
  <source 
    src="https://your-cdn.com/output.webm" 
    type="video/webm">
</video>

‍

This order ensures Safari chooses the HEVC source while Chrome, Edge, and other Chromium browsers pick the WebM. The muted and playsinline attributes help autoplay work smoothly on mobile devices. To improve perceived performance, keep durations tight (three to eight seconds often feels premium and loads fast), match dimensions to your layout to avoid oversized frames, and tune compression settings. For WebM, consider VP9 quality controls (cq or crf) to balance clarity and size; for gradients and subtle motion, 10‑bit pipelines can reduce banding. If your video fails to load in Webflow, verify your CDN’s CORS configuration. You can also add a poster attribute to show a static frame before the first decode:

<video poster="https://your-cdn.com/poster.jpg" ...>

‍

Conclusion and summary

In summary, the workflow is straightforward: export a PNG sequence with transparency, encode two outputs: WebM with alpha for Chromium browsers and HEVC with alpha for Safari, host them on a fast CDN, and embed them with dual sources. With a little care for file size and playback settings, you’ll achieve a reliable, cross‑browser transparent video experience in Webflow that’s ready for production.

Other useful resources:

‍https://rotato.app/blog/transparent-videos-for-the-web

https://css-tricks.com/overlaying-video-with-transparency-while-wrangling-cross-browser-support/

‍