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

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

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개일때는 어떤부분을 수정해야하는지 도움요청드립니다 ㅜㅜ