JSFiddle - React, Tailwind, and code Playground

by Grzegorz Rozdzialik

HTML

<button id='slide_8'>
Open
</button>
<div class="overlay" style="display: none;"></div>
<div class="propose-video-wrap" style="display: none;"> 
<div id="propose_video"></div> 
</div>

JavaScript

$('#slide_8').click(function() {
    var video_htm = '<a class="pop-close-btn">Close</a> <iframe id="propose_video_iframe" width="300" height="150" src="//www.youtube.com/embed/SQtxJ15vzOU?rel=0&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>';
    $('#propose_video').html(video_htm);
    $('.overlay').css('display', 'block');
    $('.propose-video-wrap').css('display', 'block');
    $('body').css('overflow-y', 'hidden');
    
    $('.pop-close-btn').click(closeVideoPopup);
});

function closeVideoPopup() {
    $('#propose_video').html('');
    $('.overlay').css('display', 'none');
    $('.propose-video-wrap').css('display', 'none');
    $('body').css('overflow-y', '');
}