스크롤 영상제어 질문!!!

스크롤 영상제어 질문!!!

QA

스크롤 영상제어 질문!!!

본문

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

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player(
    'player', {
      videoId: 'Jh4QFaPmdss', // 영상 고유 주소
    }
  );
}

/* scroll event */
window.onload = function() {
  var wh = window.innerHeight;
  var htmlTop = document.querySelector('html').scrollTop;
  var youtubeTop = document.querySelector('#player').offsetTop;
  var youtubeBottom = youtubeTop + wh;
  var youtubeHeight = document.querySelector('#player').offsetHeight;

  window.addEventListener('scroll', function() {
    htmlTop = document.querySelector('html').scrollTop;
    var htmlBottom = wh + htmlTop;
    youtubeHeight = document.querySelector('#player').offsetHeight;

    if (htmlBottom > youtubeTop && htmlBottom < youtubeTop + wh + youtubeHeight) {
      // player.unMute();
      player.playVideo();
    } else {
      player.pauseVideo();
    }
  })
}

 

<div id="player"></div>  

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

위 코드로 스크롤시 영상제어가 가능한데 한페이지에 2개일때는 어떤부분을 수정해야하는지 도움요청드립니다 ㅜㅜ

이 질문에 댓글 쓰기 :

답변 1

아이디를 바뀌서 새로운 객체 내지는 클래스를 만들어도 되지만 차라리 두개의 문서를 만들어 아이프레임 처리하는 것이 간명해 보이네요.

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

회원로그인

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