Do you need an animation that can play on your website and doesn't have a background so it fits in seamlessly with the rest of the design? Maybe you're demoing how your software works or taking advantage of animated infographics. You've tried gifs, but the file sizes are a drag on loading speed and SEO. Our solution for clients that need clips over 5 seconds is to use transparent video.
What is a transparent video?
Transparent videos, also known as alpha videos, have a see-through background. Unlike traditional videos that come with a set background, these videos allow whatever is behind them to show through. This means you can place a transparent video on top of any webpage or another video, and only the main subject of the video will be visible. The background will blend seamlessly with whatever is behind it, offering a more integrated and visually appealing experience.
Why would I want to use a transparent video?
For a longer video with scenes, characters and a story, transparency may not make sense. The best use cases are when you're teaching how software works or explaining something using infographics over a 10-30 second video and want it to loop like a gif without an ugly solid color background. It's possible to fake the transparency by trying to match the background color of the video to the website color, but that limits placement options.
Can any video on my website have a transparent background?
There are two file formats you will need to use to make a video with transparent background work on all major web browsers. The reason for needing two file formats lies in the differing levels of support for video codecs among major web browsers.
Apple uses a specific video format because it's optimized for their devices, offering better quality and efficiency. It's integrated into their hardware and software, making it easier for Apple products to handle these videos. On the other hand, most other major browsers prefer a different format that is open-source and doesn't require licensing fees, making it more universally accessible and easier to adopt. These differences in preferences and capabilities among browsers make it necessary to use two different video formats to ensure that transparent videos display correctly for everyone.
Most standard video projects are not delivered in these formats. We also recommend getting a non-transparent format like h.264 from your animation partner as a backup. You can send that clip to anyone, knowing it will play across all devices. Our team provides all the files you need labeled by title and format.
What file formats support transparency?
HEVC: This format is for Safari users. As of 2023, Safari doesn't fully support the transparency features of WebM, so we use HEVC to ensure that those using Apple devices and Safari can see the video with a transparent background.
WebM: This is for everyone else—Chrome, Firefox, and Edge users. WebM is widely supported and will display the video with a transparent background on these browsers.
Adding transparent videos to your WordPress website
To add both HEVC and WebM videos to your website, you'll use the HTML <video> tag and include two <source> tags within it. Here's a sample code:
<video autoplay loop muted playsinline id="myvideo">
<source src="path/to/your_video.HEVC.mov" type='video/quicktime;codecs=hvc1'>
<source src="path/to/your_video.WebM.webm" type='video/webm'>
</video>
What the code is doing:
<video muted playsinline>: This sets up a video player on your website. The muted and playsinline attributes ensure the video plays automatically without sound.
<source src="path/to/your_video.HEVC.mov" type='video/quicktime;codecs=hvc1'>: This is the HEVC video for Safari users. The browser will look for this first.
<source src="path/to/your_video.WebM.webm" type='video/webm'>: This is the WebM video for Chrome, Firefox, and Edge users. If the browser can't use HEVC, it will fall back to this one.
By including both source files, you ensure that the video with a transparent background will display correctly, regardless of which browser a visitor is using.
Adding transparent videos to your Wix website
Wix has a transparent video feature integrated into its website editor for users. The platform supports various video formats that contain an "alpha channel," including WebM, and automatically converts them into an MP4 file that can be played transparently on any browser. Simply upload your video to Wix and add it to your site.
Why should I use a video instead of a GIF on my website?
Formats like WebM and HEVC are generally better choices than GIFs for clips over 5 seconds, mainly due to file size and optimization. Both WebM and HEVC offer superior compression algorithms so that you can have higher-quality videos at a smaller file size than GIFs of the same length. This is crucial for faster loading times and a better user experience, especially for mobile users or those with slower internet connections.
WebM and HEVC are optimized for modern video playback, allowing for more complex animations, like software demos, and higher frame rates without a significant increase in file size. They also support transparent backgrounds, which GIFs do, but not as efficiently or with as high quality.
Example of transparent videos in use
One of our favorite examples of a company taking advantage of transparent videos is Alpine IQ, a software brand specializing in data analytics and customer relationship management for retailers. We created a series of product animations that were added across their website to give different types of users a quick way to understand how the platform will benefit them. Their head of marketing, Alessia Atkins, said, "The animations have created an elevated user experience and helped us to differentiate ourselves from our competitors."
Need help creating transparent videos for your website?
Feel free to contact our team at Purely Imagined to get a free quote for your project. We've created countless transparent videos for websites and will guide you in the process. If you use Figma or Illustrator for prototyping, we can pull from those designs or start from scratch. We specialize in explainer videos, 3D product rendering, and software product demos.
