JSFiddle - React, Tailwind, and code Playground

by omvaity

HTML

<div class="video-wrapper">
<video width="320" height="240" controls>
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
<div class="video-overlay"></div>
<div>

CSS

.video-wrapper{width:320px;height:240px;position:relative;}
.video-overlay{background:red;opacity:0.6;position:absolute;width:100%;height:100%;top:0;left:0;}
.video-wrapper:hover .video-overlay{display:none;}