html, body { margin:0; padding:0; height:100%; } p { margin:0; } .page { position: relative; height:100%; } .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; } .popup > iframe { position:absolute; top:50px; left:50%; margin-left:-280px; } $("[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(); });