유투브영상 레이어 팝업 재생 문제.

유투브영상 레이어 팝업 재생 문제.

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>

이 질문에 댓글 쓰기 :

답변 3

temp.find('iframe').attr('src','')

이런식으로 iframe url을 닫기 이벤트가 발생될떄 조정해보세요.

다시 눌렀을때도 재생되어야 하기 때문에 재생주소를 다른 곳에 저장하시거나 함수 실행시에 전달해주던가 해야하셔야 합니다

해결되셨나여

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

회원로그인

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