스크롤 영상제어 질문!!! 채택완료
-------------------------------------------------------------------------------------------------------
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개
답변을 작성하려면 로그인이 필요합니다.
로그인