JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pop-up">
    <div id="iframe">content</div>
</div>
<input type="button" id="vid_button" value="video"/>

CSS

#pop-up{
    position : absolute;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.5);
}

#iframe{
    width: 80%;
    margin: 20% auto;
    height: 60%;
    border: 1px solid black;
}

JavaScript

$(document).ready(function(){

  $('#vid_button').click (function(){
    $('#pop-up').fadeIn(1000);
  });
    
   $('#pop-up').click (function(){
    $('#pop-up').fadeOut(1000);
  });

});