JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<style>
video { object-fit: fill; }
video, #ref {
  width: 300px; height: 300px;
  background: green;
  -webkit-clip-path: url(#a);
  clip-path: url(#a);
}
</style>
<video crossorigin="anonymous" width="300" height="300">
  <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4">
</video>
<div id="ref"></div>
<svg viewBox="0 0 300 300">
  <defs>
    <clipPath id="a">
      <path d="M 150 0 L 300 300 L 0 300"/>
    </clipPath>
  </defs>
</svg>