How to have a transparent video in Webflow?

Design help General
1

How do I add something like this video below to website and have the BG to be transparent. Currently WebM upload keeps it black.

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

I might have an idea, you can do it via After Effects. Add an image vector/png on AE(After Effect). Do the motion/animation. Then convert it the IMAGE Sequence. PNG format. The Use the image Sequence on AE and use Bodymovin plugin to convert them to .Jason file, and use Lottie animation on webflow to display it

1 Like
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
4

@radmitry ~ Thank you for posting this information and I’m very interested in making this happen. I followed it perfectly and of course, I made sure the paths were correct and my “player” id set. I also know it needs to be published to view, but I was unsuccessful.

I’ll have to spend more time and experiment a little more later, but I was wondering if anyone else has tried this method? For now, I’m using the Lottie route, but this one seems a little more efficient.

1 Like
5

I failed at doing anything people on the internet have suggested for this until I’ve found this: Alpha channel tool: Create transparent videos for all browsers - Rotato - Rotato it’s simply as it can and gets the job done in 3 seconds.

1 Like
7

@homek_toft does Rotato only allow you to do iphones, or can you put your own video in yourself and convert it there. for me showing only iphones. I have a transparent MOV of my own product

8

Haven’t tried this yet, but looks super neat, thanks!

9

Strangely I didn’t get any notification of your reply…its probably too late, but maybe the issue was the path to the file? It should be from a hosting that supports direct links, like Digital Ocean Spaces, or Google Cloud Storage…or simply website hosting (but not Webflow, since it doesn’t allow to upload videos to the assets)

11

I get this message when I try to convert a .mov to the hvec.

avconvert: invalid configuration (preset name PresetHEVC1920x1080WithAlpha) with file:///Users/chrisnelson/Desktop/blob-640-460.mov
Presets compatible with file:///Users/chrisnelson/Desktop/blob-640-460.mov:
Preset640x480
Preset960x540
Preset1280x720
Preset1920x1080
Preset3840x2160
PresetAppleM4A
PresetAppleM4V480pSD
PresetAppleM4V720pHD
PresetAppleM4V1080pHD
PresetAppleM4VAppleTV
PresetAppleM4VCellular
PresetAppleM4ViPod
PresetAppleM4VWiFi
PresetAppleProRes422LPCM
PresetAppleProRes4444LPCM
PresetHEVC1920x1080
PresetHEVC3840x2160
PresetHEVC7680x4320
PresetHEVCHighestQuality
PresetHighestQuality
PresetLowQuality
PresetMediumQuality

12

Does this message appear in Mac OS window when you right click on the .mov and try to convert?

13

Hey! I actually ended up making it work with the help of the Wizard community and this video.

2 Likes
14

Thank you. I did exactly as suggested.

I opened an was account and uploaded a .webm video file to a newly created bucket, pasted your code into a webflow embed and…

It worked great!!

Thanks.

15

Hi! I’ve been searching and searching for a solution and this is the only thread I found any help with but it’s not working quite right for me. I have a transparent mp4 file and a webm file uploaded to Amazon S3 and still nothing shows on my page. It’s just empty even when published. So, I don’t know what I did wrong. Any help would be very much appreciated. :slight_smile:

This is the read only page: link

16

Hey, this worked perfectly on the embed side, but two strange things happen.

The .mov still shows a black background, and I followed the steps to encode and preserve transparency…also when I tested it – it only worked in Opera, and not Chrome, Brave, Firefox or Safari, even though it was pulling the .webm from Google Cloud. Shows fine in the designer, and funnier thing even still! On mobile, no matter what, it didn’t show. Which made no sense to me, as its properly formated for that breakpoint.

I had to modify your code like this though, otherwise the video was too huge.

<video width="100%" height="100%" id="player" loop muted autoplay playsinline>
  <source src="https://storage.cloud.google.com/babyganimation/TransparentBkgrd%20-%20BeforeAfter-vp9-chrome.webm">
   <source src="https://storage.cloud.google.com/babyganimation/TransparentBkgrd%20-%20BeforeAfter-2.mov">
</video>
17

Hey @Peter_Rychlik ,

You sure that your initial file has the alpha channel? For example when you export from Final Cut, you should set the output codec to Apple Prores 4444

Also when I click on your cloud links, it says forbidden, are you sure you set it for public access?

Another method I found since then is exporting your transparent video to a PNG image sequence, then in Premiere Pro you can pull that sequence and export it to Lottie via the Bodymovin plugin, and then you can do fun things with interactions in Webflow with this lottie. Although if the video is long then it can get glitchy too.

18

@radmitry hey, these comments and info are suuper helpful, thanks! I am somehow still struggling to get it to work on my end trying to convert it and set it up in AWS. This is the original video for reference: Dropbox - PathfinderHeaderOrb.mov - Simplify your life

Any ideas what I might be doing wrong?

1 Like
19

I downloaded your file and it wasn’t playing in Quicktime at first, so I put it in Final Cut and re-exported as Apple Pro Res 444, then converted it to HEVC and Webm with transparency. Seems to be working alright for me. Here are the files

And a demo https://transparent-vids.webflow.io/

As for AWS I think you just need to set object “Read” properties to public

20

I have one more question! First, this was soo helpful thanks!! I was able to get the same result after replicated exactly as you said!

The only problem I now run into is nothing seems to show up on my iphone… any ideas what could be happening on that side? There just isn’t any graphic at all when I load the pages on my phone.

Thanks again for all your help!

21

Are you sure you included both the webm and mov sources?
One of them is not supported by iOS so you need to include both.

23

I believe they are up correctly. If it’s easier you can check the embed I have for it and just look at the one that shows up on the mobile version: Webflow - Scott Caputo

I checked to make sure it wasn’t my phone and your example one shows up fine on my phone, but mine shows nothing. Maybe it’s the aws side? But I really have no idea. Thanks again for your help with all this!