I think it’s a little known fact that you can use video with alpha transparency on the web. Perhaps because the use cases are few. However, with UI I have been prototyping lately, I have found great utility in it when I want a fancy animation that I can’t easily re-create with SVG. The sort of 3-4 second fancy animation that would come out of After Effects.
Anyway, if search engines have brought you here, you probably want me to get on and ‘show you the money’. Here goes.
Syntax for transparent video on the web
You can have transparent video on the web right now, working in modern versions of Safari, Firefox, and Chrome (and its variants). As you might expect, browsers can’t agree on the ‘best’ format so you are in the age-old spot of needing to provide alternate file versions. Yes, just like fonts, standard video et al in the past.
To accomplish this feat, we can use the
picture element with a couple of alternate sources. Suppose I have my transparent video as two file versions. Don’t worry if getting the two versions themselves eludes you at this point, we will sort that in a moment:
- a *.mp4 HEVC file for Safari
- a *.webm file for Chrome/Firefox
Here is the kind of markup you need:
<video width="236" height="50" autoplay muted> <source src="my-vid.mp4" type="video/quicktime"></source> <source src="my-vid.webm" type="video/webm"></source> </video>
Of note, in this example, as it is something I am inserting and removing from the DOM as needed I want it to
autoplay, and for that to work I also need it
muted. Then we just specify our two sources and the browser picks the first one it can make use of, from top to bottom.
Whether you want to provide a third non-transparent video source for browsers that can’t make any use of either, I’ll leave as an exercise for you.
Creating the correct mp4 and webm files
Firstly, be sure the video you have exported actually has alpha transparency. The file you have should show whatever is behind it, if you open it in QuickTime, for example. If it doesn’t, head back whence you came (Final Cut Pro, Da Vinci, Premiere etc).
Once you have your transparent ‘source’ file, you need to create the HEVC mp4 and webm versions. You can do this a number of ways (allegedly) but let me save you some time. Use the Rotato Convertor tool. I know, how good can a tool be that is one letter away from a potato? Turns out, really good!
If you are on Linux or Windows, you’ll need to look elsewhere I am afraid. Most tools sit on top of FFmpeg but I found getting that running a bit of a pain. YMMV.
So, that’s it, video with alpha transparency on the web. Relatively simple and surprisingly lightweight alternative to animations.
Update! Another, possibly better, option: mix-blend-mode
This is why I can’t bear to move from WordPress; I’d lose out on a simple way to get comments! Thanks to this comment there is another option.
And you don’t necessarily need a transparent video to gain the same effect!
If you head over to the destinus homepage you should see a paper airplane video against another video and a solid background color. The video seems transparent but it isn’t! There aren’t even any different video formats for different browsers! What is this whitchery!
The magic trick here is using the
mix-blend-mode property of CSS on the upper video element. I’ve never even thought of using it for this so kudos to Benji in the comments for the solution.
Why does this work?
If we look at the specification for
mix-blend-mode, and the
screen value in particular, it has this to say:
The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged.
Practically, this means that if our video has a black background, it will be blended with whatever is behind, as if the black was… transparent.
I think I might even prefer this approach as it doesn’t require multiple versions of the video assets.