video clip-path

multiply clip patch

by Oleh Kotsubko

HTML

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <polygon points="300,0 300,500 50,500 50,0"/>
      <polygon points="900,500 900,900 50,900 50,500"/>
    </clipPath>
  </defs>
</svg>
<video loop="" autoplay="" class="bg-video" id="video-oasen" muted>
  <source src="https://www.oasen.nl/videos/seasonal/homepage_autumn_header_afternoon.mp4" type="video/mp4">
</video>
<div class="bg-video div">
  <video loop="" class="bg-video" autoplay="" muted>
    <source src="https://www.oasen.nl/videos/seasonal/homepage_autumn_header_afternoon.mp4" type="video/mp4">
  </video>
</div>

SCSS

.bg-video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  
  &.div {
    filter: grayscale(1);
    clip-path: url(#myClip);
  }
}