You have an HTML page and you need a video with transparency (like a gif) that will lay above your web page content allowing it to be seen through the video transparency. Let’s supose a video that reveals the content of your page, such as opening curtain:
What do we need?
- A video, probably in .mov, with the proper alpha channel transparency.
- A video encoder to encode the video to .webm, preserving the transparency.
- The proper use of the HTML video tag.
- If you don’t have a video with the alpha transparency done, you can do it yourself using Adobe After Effects 2022.
- Adobe Premiere 2022 is also a good asset for certain tasks.
- The best way to do it is by having a green background (chroma key) video or a matte version of the video that you can use to generate the alpha transparency using Adobe After Effects.
Converting a video with alpha channel to the web format
There are many formats that can be used on web, but the most recommended these days is WebM. It is a format that can have transparency built in and is very light. You can easily go from a 1GB mov video to a 10MB webm conversion.
Webm is also very uncomplicated in HTML. You just need to use the video tag passing the video to the src. Like an image.
<video src=’video.webm’></video>
If you have a webm video with transparency, you’re done. Just use the tag above and stop reading.
However, if you have a video with alpha transparency it will probably be a ‘.mov’ video. In that case, you can check if a video has alpha transparency using Adobe Premiere. Open the video and check its settings. Or just try to convert it to webm and if the transparency doesn’t work, it doesn’t have alpha transparency.
Alpha channel transparency is a layer of transparency that kind of transcends the RGB pixels and encodes the video with the transparent part. So if you have a curtain that opens, it’ll open to a transparency because it’s coded there on the alpha transparency layer. This is just video stuff.
To convert a video to webm there are many free encoders that you can use, but my choice would be Shutter Encoder.
Open the program and drag and drop the video onto it. To convert to webm, use the VP9 encoder. VP9 can handle transparency. Just make sure that the Alpha channel is enabled.
Start function to create your webm video and that’s it, you have a video with transparency just like a gif that is portable to the web.
You can now set it on any page by using the following tag:
<video src=”video.webm” muted autoplay loop playsinline disablePictureInPicture></video>
The attributes there are just to make sure that the video will play and loop automatically and remove all the controls that the user doesn’t need to see. It’s also muted. Videos that have sound should not be set to play automatically.
That’s it. You can put this video above any content and HTML will handle it. With CSS you can put it on position absolute, fixed, or even to cover the entire screen. Example:
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
}
It’s all easy as long as you have the original mov video with alpha transparency converted to a webm. The problem is when you’re handed a video without the alpha channel.
How to make the alpha channel transparency
If you have a video that doesn’t have the alpha channel, the background that is supposed to be transparent will be something like the above screenshot: black or maybe green screen (chroma key).
In terms of the background colour, chroma key is the best option since any video composition software will easily be able to convert that into an alpha channel.
In order to make a .mov with alpha transparency from a background colour, we can use Adobe After Effects.
Open a new project on Adobe After Effects and add the video to the composition. On the Effects & Presets pane, choose Keying > Linear Color Key.
Add the effect and change it by setting the Key Color that should be the same colour of the background that you want to make transparent. In our case it’d be black.
You can tweak other options like Matching tolerance and softness.
If you don’t see the transparency on the video view pane, you can toggle it using the little transparency button.
The set colour (black) will be turned into an alpha transparency when you render the video.
The thing is, this doesn’t work well for all videos. For videos with Chroma Key, it’s mostly fine. But in the case of black or any other colour, it will usually conflict with the colours of the video and make other areas transparent that you don’t mean to. You can play round with other Keying options on After Effects until you find something that works, if you can.
Rendering the video with alpha channel
Use the menu Composition > Add to the render queue.
On the render queue pane, you must set Render Settings; Output Module and Output To.
You can render as a mov file, Quick Time format, Best Settings possible; RGB + Alpha channels; Millions of Colors+.
On Render Settings, leave it as Best Settings. It’s Quality: Best; Resolution: Full.
On Output Module Settings screen: click on ‘Format Options…’ to set the Codec Animation.
The Output Module format is QuickTime. Channels is RGB + Alpha. Depth is Millions of Colors+ and Animation as Format’s Video Codec.
Save it and then set the Output file and folder on ‘Output To’.
The transparency that you created will be set as an alpha channel on a mov video that now can be converted to a webm file. Refer to the “conversion” chapter above in the article to know more.
Using black and white Luma Matte video to create a video with alpha transparency
If the video you have has no chroma key background, then you have to deal with background colour to set the alpha transparency as explained above. But it doesn’t always work. You may have colour conflict in setting the transparency making the video transparent on areas it’s not supposed to.
In that case you must find a way to get the video asset with the chroma key or get the Luma Matte video reference to be used to buid the alpha channel.
Usually, particularly in the Adobe world, a video that is supposed to allow transparency will be created with a Matte video that will either be on a separate video file or it’ll be on the same video file as the second half of the video.
The matte is a black & white video that maps the alpha channel of the video as white. Adobe After Effects will use the black part to create the alpha transparency. By using the black and white matte, video creators can go wild on After Effects in order to make elements invisible or appear and disappear during the scene as well as make compositions with multiple videos and setting transparency to any of them as needed.
If you have your matte video, it will look like a solid black and white video that matches the real video.
In many cases the matte will be in the same video, as the second half. So the first thing you have to do is to split the video in two if that’s the case. You can split it exactly in half. You can use Adobe Premiere Pro or any other video editor.
Then you must have 2 .mov videos, the same size, same time length. When you run both at the same time, the black & white of the matte will match the real video.
Time to go to Adobe After Effects. Open it and load the two videos.
Add both to the layers. You can leave the matte video above the real video. The matte will be set to be tracked to generate the alpha transparency.
You can easily do that by using the Track Matte or TrkMat column. On the real video line, you can select the Luma to match the matte video.
If you don’t see the Track Matte column, you can toggle it using the tiny buttons below the pane.
That’s it. It should work. If it doesn’t, try to reorder the videos on their layers and experiment with the track Inverted options. It must work as the black & white matte is supposed to be compatible with this track matte settings.
Make sure that both videos have the same time length though, or you will have to adjust the layers timeline to match them.
As soon as you see the transparency working properly, you can refer to the “rendering” chapter above in the article to make sure you’re rendering with the alpha channel.
The transparency that you created with the matte track will be set as an alpha channel on the resulting mov video that finally can be converted to a webm file. Refer to the “conversion” chapter above in the article to know more.
Transparency can be fun
There’s a bunch you can do with transparency channels not only on After Effects but on the web itself. Transparent videos, HTML and JavaScript together a whole world of fun animations on the web.
You just need the original video with transparency, or the original video with chroma key or matte. Then a conversion tool to generate the WebM video with transparency and that’s it. Adobe and Shutter Encoder are all you need.
If you don’t have the matte and the background of the video is difficult to track using colours, then I don’t know what else you can do. Talk to the video creator that gave you the asset to find out more.
Resources
https://helpx.adobe.com/ca/after-effects/using/alpha-channels-masks-mattes.html
https://photography.tutsplus.com/tutorials/how-to-use-luma-matte-transitions-premiere-pro--cms-30584
https://www.youtube.com/watch?v=TGeaCEAmFJQ
https://www.educba.com/transparent-background-in-after-effects/
https://www.youtube.com/watch?v=1bElOrXXStY
https://www.youtube.com/watch?v=Y6w7qk_zC7Q
https://www.digitalrebellion.com/blog/posts/list_of_video_formats_supporting_alpha_channels.html
https://simpl.info/videoalpha/
https://developer.chrome.com/blog/alpha-transparency-in-chrome-video/
