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>