유투브 레이어팝업 재생관련

유투브 레이어팝업 재생관련

QA

유투브 레이어팝업 재생관련

본문

메인에 링크 두개를 만들어서 유투브영상을 아이프레임으로, 레이어 팝업으로 띄우는 작업을 했습니다.

근데 재생 후 팝업을 꺼도 소리가 계속 나옵니다.

 

전에도 이문제로 씨름하다가 결국 못했던 기억이 나는데..닫는게 완전히 끄는게 아니고 숨김만 하는것이기 때문에 소리가 안꺼진다는 개념은 알고 있긴 한데...

어떻게 수정을 해야 할지 모르겠네요..;;

 

해당 문제 관련해서 검색으로 몇개 찾기는 했는데, 거기서는 또 여러개 레이어 띄우는거에서 막히고..

아래 소스입니다.

레이어를 띄었다가 닫으면 영상도 멈추는 방법 알고 계시는 분들 답변 부탁드립니다..

 

----------------------------------------------------

 

<a href="#" onclick="layer_open('layer1');return false;">01</a>
< a href="#" onclick="layer_open('layer2');return false;">02</a>

 

<style>
.layer {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:555;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}

.pop-layer-pro {display:none;}
.pop-layer-pro .btn-r { float:right; margin-bottom:5px;}
.pop-layer-pro .btn-r a { font-size:26px; color:#fff;}
.pop-layer-pro .pop-container {position:fixed; top:15%; width:400px; left:50%; margin-left:-200px; z-index:9999999;}
.pop-layer-pro .pop-container img {box-shadow: 3px 3px 10px rgba(0,0,0,0.5);}
< /style>

 

<script type="text/javascript">
 function layer_open(el){
  var temp = $('#' + el); 
  var bg = temp.prev().hasClass('bg');
  if(bg){
   $('.layer').fadeIn();
  }else{
   temp.fadeIn(); 
  }
  temp.find('a.cbtn').click(function(e){
   if(bg){
    $('.layer').fadeOut();
   }else{
    temp.fadeOut();
   }
   e.preventDefault();
  });
  $('.layer .bg').click(function(e){
   $('.layer').fadeOut();
   e.preventDefault();
  });
 }    
< /script>

 

<div id="layer1" class="pop-layer-pro layer">
  <div class="bg"></div>
  <div class="pop-container">
    <div class="btn-r"><a class="cbtn" href="#">닫힘</a></div>
      <iframe id="player" width="560" height="315" src="영상주소1" frameborder="0" allowfullscreen></iframe>
  </div>
< /div>

<div id="layer2" class="pop-layer-pro layer">
  <div class="bg"></div>
  <div class="pop-container">
    <div class="btn-r"><a class="cbtn" href="#">닫힘</a></div>
      <iframe id="player" width="560" height="315" src="영상주소2" frameborder="0" allowfullscreen></iframe>
  </div>
< /div>

이 질문에 댓글 쓰기 :

답변 2

아래 설명대로 하면

좀 고급지게 pause, play, stop을 만들 수 잇습니다

https://developers.google.com/youtube/iframe_api_reference

아래 소스를 추가헤서 play, pause 하면 됩니다

      function playVideo() {
        player.playVideo();
      }
      function pauseVideo() {
        player.pauseVideo();
      }

https://sir.kr/pb_tip/2813

 

참고하세요

본문 소스를 기본으로,
플래토 님이 알려주신 링크설명대로
1. 아이프레임에 id값 주고,
2. 스크립트상단 부분에 세줄 추가했습니다....

--------------------------------------------------------------------------------

<a href="#" onclick="layer_open('layer1');return false;">영상1</a>
<a href="#" onclick="layer_open('layer2');return false;">영상2</a>

<style>
 /* 레이어팝업창 */
 .layer {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:555;}
 .layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
 .pop-layer-pro {display:none;}
 .pop-layer-pro .btn-r { float:right; margin-bottom:5px;}
 .pop-layer-pro .btn-r a { font-size:26px; color:#fff;}
 .pop-layer-pro .pop-container {position:fixed; top:15%; width:480px; left:50%; margin-left:-240px; z-index:9999999;}
 .pop-layer-pro .pop-container iframe {box-shadow: 0 0 20px rgba(0,0,0,1);}
 /* 레이어팝업창 */
 </style>

 <script type="text/javascript">
  function layer_open(el){
  var video = $('#youtube-player').attr("src");
  $('#youtube-player').attr("src","");
  $('#youtube-player').attr("src",video);
 
  var temp = $('#' + el);
  var bg = temp.prev().hasClass('bg');
  if(bg){
    $('.layer').fadeIn();
  }else{
    temp.fadeIn();
  }
  temp.find('a.cbtn').click(function(e){
    if(bg){
    $('.layer').fadeOut();
    }else{
    temp.fadeOut();
    }
    e.preventDefault();
  });
  $('.layer .bg').click(function(e){
    $('.layer').fadeOut();
    e.preventDefault();
  });
  }
 </script>

<div id="layer1" class="pop-layer-pro layer">
  <div class="bg"></div>
  <div class="pop-container">
    <div class="btn-r"><a class="cbtn" href="#"><i class="fas fa-times"></i></a></div>
      <iframe id="youtube-player" width="560" height="315" src="영상주소1" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>

<div id="layer2" class="pop-layer-pro layer">
  <div class="bg"></div>
  <div class="pop-container">
    <div class="btn-r"><a class="cbtn" href="#"><i class="fas fa-times"></i></a></div>
      <iframe id="youtube-player" width="560" height="315" src="영상주소2" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>

답변을 작성하시기 전에 로그인 해주세요.
전체 39
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT