JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video opacity">
<iframe width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.video{
            transition:all 2s linear; 
            -o-transition:all 2s linear; 
            -moz-transition:all 2s linear; 
            -webkit-transition:all 2s linear;
float:left;
position:relative;

} 
.video.opacity:hover:before{
                background:rgba(255,255,255,0);
            }

     .video.opacity:before{
     content:"";
        background:rgba(255,255,255,0.3);
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        z-index:1;
        
    }

JavaScript

jQuery('.video').click(function(){
   $(this).removeClass('opacity');
    $(this).find('iframe')[0].src += "&autoplay=1";
    ev.preventDefault();

  });
jQuery('.video').hover(function(){
    $(this).addClass('video');
     ev.preventDefault();
    });