유투브 레이어팝업 재생관련
본문
메인에 링크 두개를 만들어서 유투브영상을 아이프레임으로, 레이어 팝업으로 띄우는 작업을 했습니다.
근데 재생 후 팝업을 꺼도 소리가 계속 나옵니다.
전에도 이문제로 씨름하다가 결국 못했던 기억이 나는데..닫는게 완전히 끄는게 아니고 숨김만 하는것이기 때문에 소리가 안꺼진다는 개념은 알고 있긴 한데...
어떻게 수정을 해야 할지 모르겠네요..;;
해당 문제 관련해서 검색으로 몇개 찾기는 했는데, 거기서는 또 여러개 레이어 띄우는거에서 막히고..
아래 소스입니다.
레이어를 띄었다가 닫으면 영상도 멈추는 방법 알고 계시는 분들 답변 부탁드립니다..
----------------------------------------------------
<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();
}
봤던겁니다..관련된 내용 거의다 보고 적용하고 했는데 잘 안되네요.
저 코드대로 해서 안된다구요?
그렇다면 안되는 코드를 봐야겠네요
중지했다가 재생 눌러서 중지한 부분부터 볼 수는 없지만
저게 안될 이유가 없습니다
본문 소스를 기본으로,
플래토 님이 알려주신 링크설명대로
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>