How to have a transparent video in Webflow?

Design help General
3

If anyone wonders how to do video with transparency in Webflow, I found a nice working solution based on this article and made it even simpler.

Here is how I did it on Mac OS, but I’m sure there is also some way to get a HEVC video with transparency on Windows.

  1. I created a Mov video with transparency in Final Cut
  2. Right clicked on the mov file and clicked “Encode Selected Video Files” at the bottom
  3. Selected HEVC 1080p and ticked the “Preserve Transparency” checkbox.
  4. Used Shutter Encoder to convert the original Mov to WebM but selecting VP9 option in the “Choose Function” dropdown menu, then on the right side under Advanced options ticked “Enable alpha channel” , then clicked Start Function. The result is a Wemb file with transparency
  5. Uploaded my HEVC .mov and my .webm files to any cloud storage like Amazon S3, Google Cloud, Digital Ocean etc.
  6. Inserted HTML embed in Webflow and added this code
<video  id="player" loop muted autoplay playsinline>
  <source src="video.webm">
  <source src="videoHEVC.mov">
</video>

Works amazing and way better and smoother than any gifs, apngs and lotties (which is great for small size images but stutters in Safari with anything larger)
Tested in Firefox, Safari, Chrome and iOS. I don’t have an Android device at the moment, but I’m sure it works fine.

Seems like a very elegant solution with file size just 5-10% of my original video.

Probably would not work in Internet Explorer, but luckily it’s almost gone :smiley:

Would be nice if Webflow adds support for alpha channel in BG videos. @cyberdave @PixelGeek

4 Likes