JSFiddle - React, Tailwind, and code Playground

by chris callaghan

HTML

<div class="page" >
    <p><a href="#media-popup" data-media="http://onlinetradingstandards.org.uk/trust_logo2/certificate.php?cert_id=4092014"><img src="http://onlinetradingstandards.org.uk/trust_logo/images/BSA-trust-token.jpg" height="75" width="75"></a></p>
    
    <div class="popup" id="media-popup">
        <iframe height"800" width"500" src="" frameborder="0" allowfullscreen="no"></iframe>
    </div>
</div>

CSS

.popup {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;    
}
iframe {
    
    height:800px;
    width:500px;
    
}

.popup > iframe {
    position:absolute;
    top:50px;
    left:50%;
    margin-left:-280px;
}

JavaScript

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");
    
    $popupIframe.attr("src", videoUrl);
    
    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});