반응형
html
<div class="pop_youtube" id="layer">
<div class="close_tbn">
<a href="#none" class="close_tbn02" > <img src="image/common/close_03.png" alt=""/> </a>
</div>
<div class="wrap">
<div class="iframe_box">
<iframe id="player" src="유튜브주소" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
js 스크립트
$(function(){
var embed = $('#player'); //동영상 코드
$('.button').on('click', function(){ //레이어 열때
var path = $(this).attr('href');
$('.iframe_box').append(embed);
$(path).fadeIn();
})
$('.close_tbn02').on('click', function(){ //레이어 닫을때
$(this).parents('#layer').fadeOut();
$('.iframe_box').empty();
})
// 외부영역 클릭 시 팝업 닫기
$(document).mouseup(function (e){
var LayerPopup = $(".pop_youtube");
if(LayerPopup.has(e.target).length === 0){
// LayerPopup.removeClass("show");
$(".pop_youtube").fadeOut();
$('.iframe_box').empty(300);
$("body").css("overflow", "auto");
}
});
});
반응형