JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<a href="#" id="showPopup">CLICK</a>

<div class="bg" style="display:none"></div>

<div class="popup" style="display:none">
<iframe id="player" width="480" height="360" src="//www.youtube.com/embed/Q_WHGV5bejk" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.popup{
   background-color:#E6E9F2;
   position:absolute;
   min-height:auto;
   width:auto;
   border: solid 2px #B9EAF0;
   z-index: 1002;
}

.bg {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 1000;
   top:0px;
   left:0px;
   width:100%;
   min-height:100%;
   overflow:auto;
}

JavaScript

$(function(){
    $("#showPopup").click(function(e){
        e.stopPropagation();
        $(".bg").toggle();
        $(".popup").toggle();
    });
    $("body").click(function(){
        $(".bg").toggle();
        $(".popup").hide();
        var video = $("#player").attr("src");
        $("#player").attr("src","");
        $("#player").attr("src",video);
    });
});