Video with Clip Path is not showing / working in Safari

Question

i created a video with clip-path. It works fine on Chrome and Firefox. But it dont work in Safari. The video is not visibile. Only if i deactivate the clip Path in the browser console of safari, i can see the video. So the problem seems to happen because of the clip path or in the svg tag of the clip path is a problem. Does anybody know why and how i can solve this?

My Code is below:

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

video {
  margin-right: 0;
  width: 46vw;
    height: 100vh;
    object-fit: cover;
}

.video-container {
  position: absolute;
  margin-left: 54vw;
  height: 100vh;
}

.border-container {
  position: absolute;
  right: 0;
  height: 100vh;
  width: 50vw;
}

.svg-clipped-text {
  -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}

.st0{fill:#E30D45;}

.svg-border {
    left: 0;
    height: 100vh;
    margin-left: 54vw;
    position: absolute;
}

  <div class="video-container">
      <video id="video1" width="1452" height="2000"  class="svg-clipped-text" muted autoplay loop>
       <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
      </video>

    </div>


    
      <svg viewBox="0 0 A B" max-width="100%" width="100" max-height="100vh" height="100">
        <clipPath id="svgTextPath">
            <polygon class="st0" points="243.1,1997.3 0,0 1851.2,0 1851.2,1997.3    "/>
         </clipPath>
      </svg>

      
      <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 4410.9 1997.3" class="svg-border" xml:space="preserve">
   <g>
     <g>
       <path class="st0" d="M4330.9,80v1837.3H314L90.3,80H4330.9 M4410.9,0H0l243.1,1997.3h4167.8V0L4410.9,0z"/>
     </g>
   </g>
   </svg>

Answer 1

I don't know why clipping directly on the video does not work, but if we move the clipping to the container element then the video does get clipped so this may help in your case:

    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }

    video {
      margin-right: 0;
      width: 46vw;
        height: 100vh;
        object-fit: cover;
    }

    .video-container {
      position: absolute;
      margin-left: 54vw;
      height: 100vh;
    }

    .border-container {
      position: absolute;
      right: 0;
      height: 100vh;
      width: 50vw;
    }

.svg-clipped-text {
      -webkit-clip-path: url(#svgTextPath);
        clip-path: url(#svgTextPath);
    }

    .st0{fill:#E30D45;}

    .svg-border {
        left: 0;
        height: 100vh;
        margin-left: 54vw;
        position: absolute;
    }

      <div class="video-container svg-clipped-text">
          <video id="video1" width="1452" height="2000" muted autoplay loop>
           <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
          </video>

        </div>


        
          <svg viewBox="0 0 A B" max-width="100%" width="100" max-height="100vh" height="100">
            <clipPath id="svgTextPath">
                <polygon class="st0" points="243.1,1997.3 0,0 1851.2,0 1851.2,1997.3    "/>
             </clipPath>
          </svg>

          
          <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          viewBox="0 0 4410.9 1997.3" class="svg-border" xml:space="preserve">
       <g>
         <g>
           <path class="st0" d="M4330.9,80v1837.3H314L90.3,80H4330.9 M4410.9,0H0l243.1,1997.3h4167.8V0L4410.9,0z"/>
         </g>
       </g>
       </svg>