[PC] 유튜브 동영상 팝업레이어(모달)로 열기 > 기술자료

• 목록

모바일(스마트폰) 홈페이지에서의 유튜브 : https://www.happyjung.com/lecture/2755

샘플보기 : https://www.happyjung.com/demo/css/youtube4.html

<script src="//code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>

<style>
.video_modal_popup.reveal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 9999999
}

.video_modal_popup .video-wrapper {
    position: relative;
    width: 80%;
    padding-bottom: 45%;
    z-index: 10
}

.video_modal_popup .video-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.video_modal_popup.reveal .video_modal_popup-closer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999
}
</style>

<div class="popupModalVideo">
    <a data-video="ruXXj-3T2e4">1번 영상</a>
    <a data-video="MmMdySW2yH0">2번 영상</a>
</div>
<div class="video_modal_popup">
  <div class="video_modal_popup-closer"></div>
</div>

<script>
$(".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>")
}),
$(".video_modal_popup-closer").click(function() {
    $(".video_modal_popup .video-wrapper").remove(),
    $(".video_modal_popup").removeClass("reveal")
});
</script> 


참고자료
http://marshall-ku.tistory.com/179