Video Transparent Background

Video Transparent Background

Video transparent background happens when the background of a video is either partially or entirely removed and replaced with an alternative one. This functionality works like a green-screen effect, but can be applied to any HEX color.

Many video formats and codecs support transparency channels, which is crucial for achieving this effect. These include WebM, MOV/QuickTime, FLV, and AVI.

When a video has a transparent background, it can be used to layer videos and create dynamic effects on websites, making the content more engaging and fun for the audience. Transparency in videos also allows for more flexibility in design, as videos with transparent backgrounds can be put on any other layers including videos, web pages, and AR content. Additionally, it can be used to make a mock video a natural part of its surroundings with a transparent background.

Particularly, WebM is recommended for web applications due to its light file size and built-in support for transparency. A substantial file size reduction is possible when converting from formats like MOV to WebM, which is an essential consideration for web-based content

The benefits of transparent backgrounds in videos are numerous. With transparent backgrounds, videos can be layered to create more dynamic and engaging content for websites or other media. It also allows for more flexibility in design, as videos with transparent backgrounds can be placed on different backgrounds and layers. Additionally, transparent backgrounds can be used to create AR content or to co-work with other people across different platforms.

This post will discuss why to use a video transparent background, common use cases, and when to include on your videos.

In this article:

“Video

Why Do You Need a Transparent Video Background?

There are dozens of instances in which you may want or need a video transparent background, but here are the most common ones:

  • You want to present yourself on top of a video for a documentary, presentation, or a video essay.
  • You want to mix filters or images in a video to make the content funnier or more dynamic.
  • You want to show more content in the background during a presentation.

Removing Video Background with Cloudinary

Removing background from a video is not an easy task. That’s because videos have numerous frames that are displayed quickly to create the effect of movement. You could hire a video editor to manually crop you out of each frame to make a transparent background, but that can be costly and time-consuming. Thankfully, Cloudinary is here for us.

One of the cool features of Cloudinary is its ability to make a video transparent background — and at scale. Just like the green screen effect you’ve seen in films and TV, Cloudinary can take solid colors and make them transparent, giving you a ton of options for overlaying them.

To make a video transparent background using Cloudinary, you’ll need:

  1. A free Cloudinary account. A Cloudinary account will give you access to Cloudinary SDKs as well as storage space on their cloud.
  2. Registration for the add-on.
  3. To integrate the SDK for the backend.
  4. A base video and the video you want to add.

We’ll be using Angular for this example, but Cloudinary supports multiple languages and frameworks. Check out the Cloudinary documentation for more information.

Simple Transparent Video Background Project

Now that you have all the prerequisites, it’s time to get started! First, identify what portions of the video you want to make transparent. Then, specify how long you want the transparency to be, including the start and end durations of the video. Note that the width of the overlayed video must match the width of the base video to transform your video. The first transformation is to scale the width to the base video with an aspect ratio of 1:0 as relative to the base video.

To demonstrate:

this.videoTransparent = cld.video("base_video.mp4")
.resize(scale().width(200))
    .videoEdit(trim().startOffset("12.0").duration("15.0"))
    .overlay(
		source(
			video("overlap_video.mp4").transformation(
            new Transformation()
			.resize(scale().width("1.0").relative())
			.effect(makeTransparent().tolerance(15).colorToReplace("#87ff66"))
	))
);

Let’s take a look at what’s happening:

  1. A new video is created. This video represents the base video that will be overlapped.
  2. Cloudinary trims the base video to overlay the video for a specific duration. `startOffset` indicates the starting point of the video, and duration specifies how long trimming should go.
  3. Then, we overlay the video.
  4. Steps 2 and 3 scaled and trimmed the video. We determine the transparency of the video. This is done with the ‘makeTransparent()’ function call. This function also removes the background contents from the video. To identify which part of the video to make transparent, specify the hex color code in colorToReplace().
  5. Finally, we specify the tolerance in the process. Unless otherwise specified, the most prominent high-saturation color in the image is selected as the color to change.

Conclusion

Making a video’s background transparent is nearly essential for media today, as we see the evolution of

More from Cloudinary:

QUICK TIPS
Matthew Noyes
Cloudinary Logo Matthew Noyes

In my experience, here are tips that can help you better manage and utilize transparent backgrounds in videos:

1. Choose the right codec and format for transparency
Use WebM with VP8 or VP9 codecs for web-based projects due to their support for transparency and smaller file sizes. For high-quality production, MOV with ProRes 4444 is a preferred option for maintaining alpha channels.

2. Optimize for web delivery with fallback strategies
Since not all browsers support WebM, fallback strategies can be implemented using formats like MP4 with a solid background or GIF with transparency for older browsers or email marketing campaigns.

3. Use consistent color for easy removal
Ensure the background color you intend to make transparent is uniform and doesn’t appear in the subject or other key parts of the video to avoid unintended transparency artifacts.

4. Leverage AI tools for dynamic background removal
Consider using AI-powered tools like Runway ML or DeepLabV3-based techniques before uploading to Cloudinary. These can automatically separate subjects from backgrounds in more complex scenes, enhancing the precision of the transparency effect.

5. Batch process for efficiency
Automate the process of background removal and transparency using Node.js scripts in combination with Cloudinary’s API, allowing you to process multiple videos simultaneously, saving time and reducing manual intervention.

6. Experiment with blending modes
Experiment with different blending modes (e.g., multiply, screen) in CSS or video editing software to achieve more creative and visually appealing effects when overlaying videos with transparent backgrounds.

7. Monitor and optimize performance
Use lazy loading and preloaders for videos with transparent backgrounds on web pages. This approach ensures that videos are ready to play without impacting the initial load time of your web pages.

8. Ensure cross-platform compatibility
Test videos with transparent backgrounds across different devices and platforms, including mobile, to ensure they display correctly and that any overlays align as expected.

9. Utilize SVG masks for complex shapes
If you need more control over the transparency effect, consider using SVG masks to define complex shapes and patterns that can dynamically interact with the video’s content.

10. Regularly update your video library
As technology evolves, regularly update your video formats and codecs to take advantage of new compression techniques and transparency improvements, ensuring the best possible quality and performance across platforms.

Last updated: Sep 8, 2024