스크롤 영상제어 질문!!!
본문
-------------------------------------------------------------------------------------------------------
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개일때는 어떤부분을 수정해야하는지 도움요청드립니다 ㅜㅜ