I have a web application build on NextJS. I intend to use a transparent video, which currently I have as MOV and WEBP, WEBP works absolutely fine on Chrome (Desktop), while MOV works fine on Safari (Desktop). But I am facing issues when it come to Chrome (IOS), Chrome (Android) has no issues. However Chrome (IOS) does not show the alpha channels, it shows a while background. How can I fix this? what is the best approach for this, or is there any other file type that I should use?
Use the WebM format along with the VP9 codec and alpha channel to enable translucent video on desktop and mobile web applications. Most contemporary browsers support this format.
Use VP9 and an alpha channel to export your video in WebM format (for example, in Adobe After Effects).
<video autoplay loop muted playsinline>
<source src="your-video-file.webm" type="video/webm">
<img src="your-fallback-image.gif" alt="Fallback image">
</video>
Use the WebM format along with the VP9 codec and alpha channel to enable translucent video on desktop and mobile web applications. Most contemporary browsers support this format.
Use VP9 and an alpha channel to export your video in WebM format (for example, in Adobe After Effects).