JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="video_cont">
    <div class="video_wrap">
        <video class="clip-svg" autoplay muted loop width="300" height="200" controls="">
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
    </div>
    <div class="video_wrap">
        <video class="clip-svg" autoplay muted loop width="300" height="200" controls="">
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
    </div>
    <div class="video_wrap">
        <video class="clip-svg" autoplay muted loop width="300" height="200" controls="">
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
    </div>
    <div class="video_wrap">
        <video class="clip-svg" autoplay muted loop width="300" height="200" controls="">
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
    </div>
</div>

CSS

video {
    display: inline-block;
    float: left;
    margin-right: -25%;
    width: 25%;
    height: auto;
    transition: all 600ms ease-in-out;
}
.clip-svg {
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.clip-svg:first-of-type {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.clip-svg:last-of-type {
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
margin-right: 0;
}
.video_cont{
  position: relative;
  width: 100%;
  display: inline-block;
}
video{
  width: 100%;
}
.video_wrap {
    float: left;
    width: 25%;
    width: calc( 25% + 30px);
    margin-right: -30px;
}