Transparency in Videos from After Effects on Mac for Wordpress

by David Ramsay |

I struggled to get transparent videos working on wordpress for both mobile Safari and Chrome.

I was finally able to get it to work by:

(1) exporting a full resolution Apple ProRes 4444 file from After Effects.

(2) Use the Rotato tool to convert it:

Alpha channel tool: Create transparent videos for all browsers | Rotato
Transparent videos can be confusing, so we made a 1-click, privacy-first, free tool to create videos with transparency that work in all browsers.
Rotato

(3) upload both, add your video tag, and modify it via html (there is likely an edit as html button on your block element) so that it looks like the following:

<figure class="wp-block-video" style="margin-right:0;margin-left:0">
<video autoplay loop muted playsinline preload="auto" id="customedited">

<source src="http://principledinterfaces.com/wp-content/uploads/sites/5/2024/04/vid-safari.mp4" type='video/mp4; codecs="hvc1"'>

<source src="http://principledinterfaces.com/wp-content/uploads/sites/5/2024/03/vid-chrome.webm" type='video/webm'>

</video></figure>

It requires all of the attributes autoplay loop muted playsinline to work.

I believe it's also possible to export webm directly using Adobe Media Encoder; it's also possible to use Shutter Encoder with a transparent file, set to h.265 and mp4 and choosing the GPU acceleration (which will then allow you to encode Alpha channel in the advanced options).  This should also work if you have your tags right and if the Rotato tool is no longer available.