Issue with loss of background transparency on Safari with webm video file

Hi, and please HELP!

I have a .webm animation file that I want to appear in my site’s hero section. It has a transparent background and it should appear at the top of the table of contents for this landing page. I attach my read only file at the end of this post.

I tried to to upload it as a background video but this way it had black background instead of transparent so after reading a post at this forum about that topic I hosted it on dropbox and added a custom code with a link.

It seams to work well now but not on Safari (both desktop and mobile on iphone) where it is visible with dark background or sometimes not at all.

How it looks on Chrome:

How it looks on Safari:



Does anyone has an idea how to fix that for Safari?
Any help would be very appreciated, I have a launch of this landing page on Monday and I am out of ideas.

Thanks!


Here is my site Read-Only: Webflow - Problem Solving Landing Page