I am using Angular, and i have this code:

<video class="w-[350px] absolute left-[5%] top-[23%] max-lg:w-[160px] max-lg:h-[190px] max-lg:top-[10%] max-lg:left-[30%] z-50"
           playsinline
           [autoplay]="true"
           [loop]="true"
           [muted]="true">
        <source src="assets/landing/home/announcement-section/video1.mov" type="video/quicktime">
        <source src="assets/landing/home/announcement-section/video2.webm" type="video/webm">
        <source src="assets/landing/home/announcement-section/video3.mp4" type="video/mp4">
    </video>

The video is working good in Desktop, it is working in Safari but with glitches, but in Mobile Google or Safari it plays but with black background.

I tried to switch the orders in these but didnt work.