Transparent videos offer a unique way to showcase products or features without the constraints of a fixed backdrop. For software companies, this is especially useful in animated product demos. Instead of a standard video, you can have a transparent video where the software appears to be part of the website itself, making for a more direct and engaging presentation.
What is a transparent video?
Transparent videos, also known as alpha videos, are videos that 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.
Can a video have a transparent background on my website?
Yes! There are two file formats you will need to use to make a video with a 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.
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 several reasons, primarily focusing on file size and optimization. Both WebM and HEVC offer superior compression algorithms, which means you can have higher-quality videos at a smaller file size compared to GIFs. This is crucial for faster loading times and a better user experience, especially for mobile users or those with slower internet connections.
Additionally, WebM and HEVC are optimized for modern video playback, allowing for more complex animations, like explainer videos, 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 being used on websites
We had the pleasure of partnering with Alpine IQ, a software company specializing in data analytics and customer relationship management for the cannabis industry. Our collaboration aimed to revolutionize their product pages by replacing traditional hero images with animated transparent videos.
Each animation lasts between 10 to 30 seconds, illustrating the unique functionalities of Alpine IQ's software solutions. These dynamic hero images serve as an immediate point of engagement for visitors, offering a concise visual guide to how each feature operates.
Picking the Best Video Production Agency
When it comes to creating impactful videos, the agency you choose can make all the difference. Purely Imagined specializes in high-quality video production services, including explainer videos, 3D product rendering, and product demos. Our team of experts understands the nuances of creating videos with transparent backgrounds.
Conclusion
Incorporating transparent videos into your website can significantly elevate the user experience, especially for software companies aiming to showcase their products through animated demos. These videos offer a seamless blend with your website's design, making the content more engaging and interactive.
Understanding the technical aspects, such as the need for two different file formats, ensures that your transparent videos are accessible to a broad audience, regardless of their browser choice. Whether you're using WordPress or Wix, adding these videos is a straightforward process.
Want to stay up to date on the world of animation and video marketing? Subscribe to our monthly newsletter here: https://newsletter.purelyimagined.com/signup