Video with Clip Path is not showing / working in Safari - html

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>

Answer 2

I can confirm both issue reported by Luis and the solution from A Haworth to work.
Apparently, even though Safari is webkit, and Chrome is webkit, some quirks cause only Safari to fail applying clip-path when specified directly on a <video>. Wrapping the video with <div class="container><video/></div> and applying clip-path to the container is valid workaround.
Funny thing: with clipping directly on the <video> it is rendered correctly (even clipped) on Safari tab overview 🤦