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();
});
Para testes
.png "English"){kind=small}