I need to use a HTML5 video tag to display a webm file which plays in a loop. I do not want to show any video background or controls. Currently, it looks like this:

.my_video {
    display: block;  
    border: none;  
    outline: none;  
    pointer-events: none;  
    background-color: transparent !important;  

    &::-webkit-media-controls,  
    &::-webkit-media-controls-panel,  
    &::-webkit-media-controls-play-button,  
    &::-webkit-media-controls-start-playback-button {  
        display: none !important;  
        -webkit-appearance: none !important;  
    }  
}

<video className={styles.my_video} autoPlay loop muted playsInline>
    <source src="/mywebmfile.webm" type="video/webm"/>
</video>

It works on all systems and browsers, but on all browsers iOS mobile devices. There, the video has a black background although the background should be transparent. What do I need to change?