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

    <div class="parent_videologo_container" > <img src="https://static1.squarespace.com/static/61ae7bac2fe6511670e0d1d8/t/65f1cf711fea292ed70a3160/1710346097599/Method%2BLogo%2BPrimary_NoTagline.png" />
        <div class="videologo_container" >
            <video autoplay playsinline muted loop width='100%' height='100%' src="https://static1.squarespace.com/static/61ae7bac2fe6511670e0d1d8/t/6602cf3d75fd305fdcbdcaca/1711460158389/BGVideoV2.mp4" type="video/mp4" class="videologo">

            </video>
        </div>

    </div>
  
  

    <svg viewBox="0 0 1 1" width="100%" height="100%"  preserveAspectRatio="xMidyMin meet" >
        <defs>
        <clipPath clipPathUnits="objectBoundingBox" id="videologomask">

            <path d="M.048645,0c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645V.048645c0-.026733-.021912-.048645-.048645-.048645H.048645ZM.405151,0c-.026794,0-.048645.021912-.048645.048645v.189758c0,.026733.021851.048645.048645.048645h.189697c.026794,0,.048645-.021912.048645-.048645V.048645c0-.026733-.021851-.048645-.048645-.048645h-.189697ZM.951355,0h-.189758c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645V.048645c0-.026733-.021912-.048645-.048645-.048645ZM.048645.356506c-.026733,0-.048645.021851-.048645.048645v.189697c0,.026794.021912.048645.048645.048645h.189758c.026733,0,.048645-.021851.048645-.048645v-.189697c0-.026794-.021912-.048645-.048645-.048645H.048645ZM.405151.356506c-.026794,0-.048645.021851-.048645.048645v.189697c0,.026794.021851.048645.048645.048645h.189697c.026794,0,.048645-.021851.048645-.048645v-.189697c0-.026794-.021851-.048645-.048645-.048645h-.189697ZM.761597.356506c-.026733,0-.048645.021851-.048645.048645v.189697c0,.026794.021912.048645.048645.048645h.189758c.026733,0,.048645-.021851.048645-.048645v-.189697c0-.026794-.021912-.048645-.048645-.048645h-.189758ZM.048645.712952c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645v-.189758c0-.026733-.021912-.048645-.048645-.048645,0,0-.189758,0-.189758,0ZM.405151.712952c-.026794,0-.048645.021912-.048645.048645v.189758c0,.026733.021851.048645.048645.048645h.189697c.026794,0,.048645-.021912.048645-.048645v-.189758c0-.026733-.021851-.048645-.048645-.048645,0,0-.189697,0-.189697,0ZM.761597.712952c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645v-.189758c0-.026733-.021912-.048645-.048645-.048645,0,0-.189758,0-.189758,0Z"/>
       

        </clipPath>
        </defs>
      </svg>

</body>
</html>

Logo Mask Video CSS

.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;
}

New contributor

CLD is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.