I have a blender animation with a transparent background that is showing on all browsers but safari

portfolio57333.herokuapp.com

Hello,

I just created this page and was trying out something new. I render an animation in blender with a transparent background as a .webm and it displays perfectly fine on every browser but safari. When I tried the render it with quicktime and the video codec as QT rle / Qt Animation for safari, I get a .mov file which wont display at all. Sometimes it would display but it would have a black background instead of transparent on safari.

safari is also hard for me to test on.

<div class="vid-container">
        <video id="main-vid" playsinline muted loop autoplay  poster="images/earthholo.png">
            <source src="video/0001-0250.mov" type='video/mov'>
            <source src="video/0001-0250.mov" type='video/quicktime'>
            <source src="video/0001-0250.webm" type='video/webm'>
            <source src="video/0001-0250.webm" type='video/quicktime'>
        </video>
    </div>

I tried different variations but got no success in safari.

I have no JavaScript for this and the CSS is only controlling the position and size.