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:

• Show a video on top of your html contents
• Show a video on top of another video
• Play a video that looks like it’s changing shape
• Show a video that just ever so slightly overlaps the body text on a page, breaking the boxy look

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 an example we put together. See the live site here and the Webflow project here.

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.

The easy way

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.

The real way

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).

The results?

• Safari supports HEVC with alpha, Chrome does not.
• Chrome supports VP9 with alpha, Safari does not.

Now what? You guessed it: We’ll have to provide *both* formats, and let each browser choose.

Converting your videos

Obviously, the first thing you need is a video with an alpha channel. (If you’re using Rotato, here's how to get one)

What to export

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.

1. First, export your HEVC with alpha, and call it movie-hevc.mov. This will be our Safari-ready movie.
2. If your video app supports VP9 with transparency, choose that. If it doesn’t support it directly, like Rotato, we’ll need an intermediate format, so choose Apple ProRes4444 and call it movie-prores.mov

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.

Installing ffmpeg

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.

Converting to ProRes to VP9 with alpha

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.

Using the videos on the web

Upload the movies to your web server, and use this code snippet wherever you need your video.

	
  	
    
        <video width="600" height="100%" autoplay loop muted playsinline>
        <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4; codecs="hvc1"'>
        <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
        </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.