Why is my SVG clip video only working on one shape and not the other?

Question

My css:

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

    .svg-clipped_two {
        -webkit-clip-path: url(#svgPath_two);
        clip-path: url(#svgPath_two);
    }

My HTML:

<!--1st SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153.37 494"><g data-name="Layer 2"><clipPath id="svgPath"><path d="M1093.37 0H60A60 60 0 0 0 0 60v374a60 60 0 0 0 60 60l1033.37-179c39.28-6.29 60-26.86 60-60V60a60 60 0 0 0-60-60z" fill="#990000" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--Video 1-->
<video muted autoplay="autoplay" class="svg-clipped" type="video/mp4" src="Video1.mp4" style="margin: -500px 0 0 0; border: solid 0px #990000; width: 1200px; height: 600px; background-color: #990000; mix-blend-mode: normal;" ></video>

======================

<!--2nd SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153 494"><g data-name="Layer 2"><clipPath id="svgPath_two"><path d="M1093 0L60 179c-39.26 6.29-60 26.86-60 60v195a60 60 0 0 0 60 60h1033a60 60 0 0 0 60-60V60a60 60 0 0 0-60-60z" fill="#ffbe00" fill-rule="evenodd" data-name="Layer 1"/></g></clipPath></svg>

<!--Video 2-->
<video muted autoplay="autoplay" class="svg-clipped_two" type="video/mp4" src="Video2.mp4" style="margin: -500px 0 0 0; border: solid 0px #990000; width: 1200px; height: 600px; background-color: #990000; mix-blend-mode: normal;"></video>

The code works fine on the first shape and it clips the video to the shape correctly. However, the second shape and video are not behaving and the video is not being clipped to the shape accordingly like the first. Why is this happening and how do i fix it?

Answer 1

For the 2nd SVG Shape, you've messed closing </g> and </clipPath>:

<!--2nd SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153 494">
  <g data-name="Layer 2">
    <clipPath id="svgPath_two">
      <path d="M1093 0L60 179c-39.26 6.29-60 26.86-60 60v195a60 60 0 0 0 60 60h1033a60 60 0 0 0 60-60V60a60 60 0 0 0-60-60z" fill="#ffbe00" fill-rule="evenodd" data-name="Layer 1"/>
    </g> <!-- HERE -->
  </clipPath>
</svg>

Working example:

video {
  margin: -500px 0 0 0;
  border: solid 0px #900;
  width: 1200px;
  height: 600px;
  background-color: #990000;
  mix-blend-mode: normal;
}

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

.svg-clipped_two {
  -webkit-clip-path: url(#svgPath_two);
  clip-path: url(#svgPath_two);
}

<!--1st SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153.37 494"><g data-name="Layer 2"><clipPath id="svgPath"><path d="M1093.37 0H60A60 60 0 0 0 0 60v374a60 60 0 0 0 60 60l1033.37-179c39.28-6.29 60-26.86 60-60V60a60 60 0 0 0-60-60z" fill="#990000" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--Video 1-->
<video muted autoplay="autoplay" class="svg-clipped" type="video/mp4" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm"></video> ======================

<!--2nd SVG Shape-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153 494"><g data-name="Layer 2"><clipPath id="svgPath_two"><path d="M1093 0L60 179c-39.26 6.29-60 26.86-60 60v195a60 60 0 0 0 60 60h1033a60 60 0 0 0 60-60V60a60 60 0 0 0-60-60z" fill="#ffbe00" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--Video 2-->
<video muted autoplay="autoplay" class="svg-clipped_two" type="video/mp4" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm"></video>