WebPublisher/JavaScript & jQuery
[jQuery] data-video 값으로 유튜브 팝업 띄우기
amanda
2023. 9. 18. 11:09
<div class="popupModalVideo">
<a data-video="">
<img src="youtube_01.png" class="youtube" alt="">
</a>
<a data-video="">
<img src="youtube_02.png" class="youtube" alt="">
</a>
</div>
<!-- modal -->
<div class="video_modal_popup">
<button class="close_btn"><img src="popup_close.png" alt="닫기 버튼"></button>
<div class="video_modal_popup-closer"></div>
</div>
// Youtube popup
$(".popupModalVideo a").click(function () {
$(".video_modal_popup").addClass("reveal"),
$(".video_modal_popup .video-wrapper").remove(),
$(".video_modal_popup").append("<div class='video-wrapper'><iframe width='560' height='315' src='https://youtube.com/embed/" + $(this).data("video") + "?rel=0&playsinline=1&autoplay=1' allow='autoplay; encrypted-media' allowfullscreen></iframe></div>"),
$(".close_btn").css('display', 'block')
}),
$(".video_modal_popup-closer").click(function () {
$(".video_modal_popup .video-wrapper").remove(),
$(".video_modal_popup").removeClass("reveal"),
$(".close_btn").css('display', 'none')
});
$(".close_btn").click(function () {
$(".video_modal_popup .video-wrapper").remove(),
$(".video_modal_popup").removeClass("reveal"),
$(".close_btn").css('display', 'none')
});