이미지 클릭시 유튜브 영상 재생 및 정지하기 질문
본문
이미지 클릭 시, 유튜브 영상은 숨긴 채로 노래만 재생하려 합니다.
https://jsfiddle.net/ndxmk8pu/
해당 코드를 엉성하게나마 수정하여 처음 목적은 달성했습니다만, 문제는 이미지 클릭시에도 노래가 멈추지 않습니다...
영상 섬네일은 계속 숨기면서, 이미지 클릭 시 노래 재생 및 정지가 되도록 하는 것이 가능할까요?
아래는 제가 수정했던 부분입니다.
var player;
$("#javaImg").click(function(){
if($("#player").is("div"))
{
$(this).hide();
player = new YT.Player('player', {
height: '32',
width: '32',
playerVars: { 'controls': 1,'autohide':1},
videoId: 'r59xYe3Vyks',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
else {
player.autohide=1;
player.playVideo();
}
// when video ends
function onPlayerReady(event) {
event.target.playVideo();
$("#player").hide();
$("#playerContainer").append('<div id ="player" width="32" height="32"></div>');
$("#javaImg").show();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").remove();
$("#playerContainer").append('<div id ="player" width="32" height="32"></div>');
$("#javaImg").show();
}
}
});
읽어주셔서 감사드립니다. 남은 연휴 잘 보내시고 새해복 많이 받으세요^^
답변 1
<script src="https://www.youtube.com/iframe_api"></script>
<style>
#ytDiv { position:relative; width:50px; height:50px; overflow:hidden; margin:0 auto; }
#ytDiv iframe { display:block; position:absolute; top:0px; z-index:2; width:100%; height:100%; opacity:0; border:none; }
#ytDiv img { display:block; position:absolute; top:0px; z-index:1; width:100%; height:100%; cursor:pointer; }
</style>
<div id="ytDiv">
<iframe src="https://www.youtube.com/embed/?loop=1&vq=highres&enablejsapi=1&playlist=ZHUQwXHjSQg"></iframe>
</div>
<script>
playUrl = "https://blog.kakaocdn.net/dn/EBFoO/btrWUGYXlQe/6vSBmSdPLQRkbHLYFryVC0/img.png";
pauseUrl = "https://blog.kakaocdn.net/dn/vr4Nt/btrWZW0PXoH/ltbYERwBEJPOYKxKEUFkm1/img.png";
ytDiv.innerHTML = ytDiv.innerHTML + "<img src='" + playUrl + "'>";
function onYouTubeIframeAPIReady() {
ytDiv = new YT.Player(ytDiv.querySelector("iframe"), { events: {"onStateChange":onPlayerStateChange} });
}
function onPlayerStateChange(event) {
if (event.data === 1) {
document.querySelector("#ytDiv iframe").style.display = "none";
document.querySelector("#ytDiv img").src = pauseUrl;
}
if (event.data === 2) {
document.querySelector("#ytDiv iframe").style.display = "none";
document.querySelector("#ytDiv img").src = playUrl;
}
}
onMode = 1;
ytDiv.querySelector("img").onclick = () => {
onMode ? ytDiv.pauseVideo() : ytDiv.playVideo();
onMode = !onMode;
}
</script>
원본유튜브 - https://www.youtube.com/watch?v=ZHUQwXHjSQg
결과는 https://wittazzurri.com/editor/html_editor.php 에서 확인해 보시길요.
아래 3군데만 본인이 알아서 고쳐 사용하고 버튼이미지는 각각 가로 세로 50px 정사각형으로 만들어 쓰세요.
<iframe src="https://www.youtube.com/embed/?loop=1&vq=highres&enablejsapi=1&playlist=ZHUQwXHjSQg">
playUrl = "https://blog.kakaocdn.net/dn/EBFoO/btrWUGYXlQe/6vSBmSdPLQRkbHLYFryVC0/img.png";
pauseUrl = "https://blog.kakaocdn.net/dn/vr4Nt/btrWZW0PXoH/ltbYERwBEJPOYKxKEUFkm1/img.png";
우와... 말끔하게 적용되네요 정말 감사드립니다^^ 새해 대박나세요~
답변을 작성하시기 전에 로그인 해주세요.
