5 Quick Ways to Test Alpha Channels (Transparency) in videos

Traditional tools won't reveal transparency in videos. Here's five ways that work.

You've made a video with transparency—or so you think! Because how do you test it? Normally, to preview your moving picture masterwork, you'd simply double click it to open it in QuickTime. But when you do that with a transparent video, you see a black background.

Yikes. Is it not working now?

Or maybe you tried dragging it into your browser—only to be reunited with the pitch black background. A popular trick has been to hit space on a video to see it in QuickLook. Well, it turns out that trick is now dead, starting from Monterey. It may be back one day, but we don’t have time to wait.

So. What's going on? Does the video have transparency or not? Let's find out. Here's what we'll cover:

What you'll need

You need a video that you suspect (hope!) has an invisible background. That could be a video exported from Adobe After Effects, Final Cut, or maybe Rotato (here's how to export mockup devices with transparency in Rotato).

You're looking to use this video in a project where your video will sit on top of other media, like a web page, images, or even another video.

Currently there are 3 widespread video formats that supports this: WebM, HEVC With Alpha and ProRes4444. We're not going to talk too much about the last one, as it is mostly an intermediary format; a format you use between apps on Apple's platforms. HEVC With Alpha and WebM are both highly modern standards, optimized for playing on the web, and on computers without a whole lot of processing power, like a mobile phone.

How do I test if my video has a transparent background?

Luckily, you have quite a few options. You can use a video editor like iMovie or Final Cut. You can also use your favorite web browser (with a trick, we’ll get back to that, and you can use Rotato’s free web-based test tool.

1. Rotato’s free, web-based tester

  • Works with HEVC in Safari
  • Works with WebM in Chrome

This is useful if you quickly want to double check a video that you're going to use on the web. We've made a quick and free tool for you that lets you quickly test a video for use in a browser like Chrome and Safari.

Open Rotato's online transparency tester

Watch this quick video to see how it works:

Loading...

As you may know, today's browsers support transparent videos, and have done so for a while, but they don't understand the same formats. Chrome plays webm videos and Safari plays mp4with the HEVC codec. See our guide on web video transparency to learn how to add both to one page and let the browser pick.

Now, let's get into testing the two formats. First, Chrome - and thereby Webm with alpha channels.

To test a WebM file for transparency:

  1. Open Chrome and go to the transparency tester tool
  2. Click the Choose File button and select your webm video
  3. The website will now attempt to play your video on top of a colored background. If you see a black background, that's bad news; your video's background is not transparent. If you see the colored background, it works!

To test a HEVC With Alpha video for transparency

  1. Open Safari and go to the transparency tester tool
  2. Click Choose File and select your mp4 video
  3. Once again, the website will attempt to play our video floating above a color gradient.

2. iMovie

  • Works with HEVC (mp4)
Loading...

iMovie is free and most likely already installed on your Mac. If it isn't, you can grab it for free on the Mac App Store here. Here's how to test your alpha channel in iMovie

  1. Switch to the Backgrounds tab in the top left area
  2. Drag one of the backgrounds to the timeline area
  3. Drag in your video
  4. You should now see the background behind your video

3. Final Cut Pro

  • Works with HEVC (mp4)
Loading...

Final Cut is Apple's professional video editing software. There's a good chance you're using this if you do slightly more advanced video production. If you're using Adobe After Effects or Premiere, the technique is the same: add a background, then add your video on top of that background.

  1. Drag your video to the timeline area
  2. Go to the Titles and Generators tab in the upper left corner
  3. Click Generators
  4. Choose a background and drag it to the timeline area below the video you dragged in step 1
  5. You should now see the background behind your video

4. Using Chrome Developer Tools

  • Works with WebM

While WebM is a free, open source, and highly efficient format, it's unfortunately not very commonly supported by video editors. Here's how to check a WebM file's transparency using nothing but the Chrome app you already have have on your Mac or Windows computer.

Loading...

You can test your WebM file for transparency simply by dragging it into Chrome - but wait! There's a catch! The background will be black by default. So we need to tell Chrome that we want another background

  1. Open Developer tools by right clicking the video and choosing Inspect
  2. Click the Elements tab, and then the Styles tab
  3. In element.stylewrite background:red
  4. If your video is transparent, you'll see a red color below your content.

5. Using Safari Developer tools for HEVC/MP4 video files

  • Works with HEVC (mp4)
Loading...

Testing videos in Safari is pretty much the same as in Chrome. The only difference is that you have to enable Developer Tools. You can do that in Preferences, then Advanced, then Show Develop menu in menu bar. After that, you can follow steps 1 to 4 above.

Next steps

Now that you've confirmed that your videos are in fact transparent, it's time to put them to use. If your project is web-based, there are a few things to keep in mind when writing your HTML. But you're in luck! We have a handy guide to web video transparency here, complete with snippets you can copy and paste.