SVG Clip Mask Over Video Not Displaying in Safari

Question

I successfully created an SVG clip mask using a company logo that is supposed to be used as a mask over a video montage. However, it works in every browser except for Safari. I have scoured this site and others and tried many solutions to get this video mask to work in Safari to no avail. I'm very much hoping that someone here can help. Please see my code below. Thanks!

Logo Mask Video HTML

.parent_videologo_container {
    width: 100%;
}

.videologo {
    clip-path: url(#videologomask);
    -webkit-clip-path: url(#videologomask);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.videologo_container {
    position: absolute;
    z-index: 0;
    background-size: 100% 100%;
    top: 0px;
    left: 0px; 
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    opacity: 0.3;
}


.parent_videologo_container img {
    position:absolute;
    top: 8.5%;
    bottom:0;
    left: 4.5%;
    right:0;
    width: 55%;
    -webkit-filter: drop-shadow(0px 0px 40px #000000);
    filter: drop-shadow(0px 0px 40px #000000);
    z-index: 100;
}

SVG Clip Mask Over Video Not Displaying in Safari

Answers (0)

Related Questions