JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<div class="sq">
  <video src="https://vjs.zencdn.net/v/oceans.webm"></video>
  <div class="overlay"></div>
</div>

<div class="sq circle" style="left: 340px">
  <video src="https://vjs.zencdn.net/v/oceans.webm"></video>
  <div class="overlay"></div>
</div>

SCSS

div.sq {
  position: absolute;
  left: 10px;
  width: 300px;
  height: 300px;
  background-color: blue;
  /* border-radius: 50%; */
  overflow: hidden;
  
  border: solid lightblue 5px;
  
  video {
    width: 100%;
    height: 60%;
    background: grey;
  }
}

div.overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;

    background-color: rgba(50, 255, 50, 0.4);
    border: solid lightgreen 5px;
    box-sizing: border-box;
}

div.sq.circle {
  border-radius: 30px;
}