이미지 클릭시 유튜브 영상 재생 및 정지하기 질문

이미지 클릭시 유튜브 영상 재생 및 정지하기 질문

QA

이미지 클릭시 유튜브 영상 재생 및 정지하기 질문

본문

이미지 클릭 시, 유튜브 영상은 숨긴 채로 노래만 재생하려 합니다.

 

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

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

회원로그인

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