This is a part of our BIg Guide to Transparency series.
Ever wondered why you don’t see videos with transparency on the web, let’s just say, all the time?
Just imagine all the cool things you could do with it:
You may have even tried a Youtube embed, or a Video tag, and found that nope, that didn’t work either. And how do you even make a transparent video - a video with an alpha channel - in the first place? And if you do find out, how do you double check that it is in fact transparent? It’s not a friendly environment. It’s as if someone decided a long ago that we won’t need this. But we do.
And it’s technically possible.
On top of that, he results look great.
Here's a simpler example (demo page)
So why isn’t it used more? Because it’s just not supported — in an obvious way. In this post I’ll show you not only how to do this, but also how to cheat and make a shortcut using smoke and mirrors.
Let’s get to it. But first, let’s agree on a few terms.
So, the blue box is your website, the red box is your transparent video, and the green box is your optional foreground - which might as well be a video, too.
The big question that will determine our path going forward is: what do you want to use as a background, under your video?
Your answer decides if we can go the easy way, or the slightly harder way. Let’s start with the former.
Here’s an example.
See how they have two videos going on here? On the top layer there’s a video showing their product. The elements shrink and grow like it’s no big deal. And to top it off, they even have a video running below the video. Here’s what that would look like
How did they do that? Well, they didn’t. Here’s what’s really going on
What we’re seeing here is a clever workaround. The Typeform designers simply combined the UI video on top of the background video into one, single video. Then, they matched the background color with the color under the text, and used the new, combined video as the background element. No transparency needed.
Here’s the video they use:
So that’s one workaround - smoke and mirrors. It works because the background is abstract, and nicely blends in with the site’s own background.
The big question is now: What if the background is not abstract? What if you simply want to play your video on top of rendered html, like in the first example? For that, we need a bigger knife.
This shouldn’t really be a problem. We’ve had transparent video formats for years. So why isn’t this simple? Long legal story short: There are two big browsers from two big companies. Google and Chrome think open source is awesome, so they made their own open source format. Apple and Safari want to stick to the MPEG standard, so they support HEVC (H265).
Now what? You guessed it: We’ll have to provide *both* formats, and let each browser choose.
Obviously, the first thing you need is a video with an alpha channel. (If you’re using Rotato, here's how to get one)
Before you do anything, make sure your video isn’t too big, as you’ll be playing it on the web directly. In Rotato, 720p is often big enough for a short video.
We now have 50% of the videos we need, so we’re half way there! Next up, we’ll convert that ProRes video to VP9 so Chrome has something to play as well.
First, we’ll need an app that can convert between video formats. FFmpeg is free and fast. Install the latest version of ffmpeg here. If you’re not sure how to put FFmpeg in your path, see this video tutorial for an end-to-end tutorial.
It’s a command-line tool, so you’ll need to open Terminal on your Mac. Once there, cd into the folder with the source video.
In Terminal, in the folder with your exported videos, enter the following command
ffmpeg -i "movie-prores.mov" -c:v libvpx-vp9 movie-webm.webm
If you have an Intel Mac, you will now hear your cooling fans getting to work. It’s going to take a few minutes, depending on how big your video is. There is a lot of math going on here, so grab a coffee and wait. It can easily take 10-15 minutes.
Upload the movies to your web server, and use this code snippet wherever you need your video.
That's it. You are now a master see-through!
We'd love to hear if this guide was helpful or if you have any comments. We're always improving our guides. Let us know on guides at rotato.xyz. The 3D illustrations were made with the awesome Spline tool, and the example comes from Typeform.