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

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

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

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

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

아래 소스입니다.

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

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

<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>