유튜브 팝업 레이어 만들기

.popupVideo란 div 아래의 a 태그를 클릭하면 유튜브 비디오를 레이어로 띄워 주면서 영상을 재생합니다. (PC)

화면의 빈 곳을 누르면 팝업 레이어가 사라지면서 유튜브 영상이 정지됩니다.

a 태그 안에 들어간 내용은 유튜브 들어가셔서 아무 영상이나 클릭하시면

https://www.youtube.com/watch?v=ZBCGkpJWjVc

같은 형식으로 주소창에 표시될 겁니다.

?v= 뒤의 내용이 비디오의 id입니다. 해당 내용 복사해서 붙이시면 됩니다.

'공유'버튼 클릭하시면 youtu.be/ 뒤에 나오는 내용도 똑같이 비디오의 id입니다.

데모

1번 영상

2번 영상

HTML

<div class="popupVideo">
  <a data-video="ooy0KHe5oJ8">1번 영상</a>
  <a data-video="di-jvtSY_Ng">2번 영상</a>
</div>
<div class="video-popup">
  <div class="video-popup-closer"></div>
</div>

CSS

.video-popup.reveal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index:9
}


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


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


.video-popup.reveal .video-popup-closer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9
} 

비디오 크기 조절하는 방법은 이 글을 참고해주세요.

JS

$(".popupVideo a").click(function() {
  $(".video-popup").addClass("reveal"),
  $(".video-popup .video-wrapper").remove(),
  $(".video-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-popup-closer").click(function() {
  $(".video-popup .video-wrapper").remove(),
  $(".video-popup").removeClass("reveal")
});