테스트 사이트 - 개발 중인 베타 버전입니다

스크롤 영상제어 질문!!! 채택완료

하로데스 2년 전 조회 1,332

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

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();     }   }) }

 

 

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

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

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

하로데스
2년 전
문서를 불러오는 방법으로 해봐야겠네요 감사합니다~

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인