JSFiddle - React, Tailwind, and code Playground

HTML

1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
<div id="player"></div>
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />


<script>
var player
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    height: 390,
    width: 640,
    videoId: "GF6BeWH53YI",
    events: {
      "onReady": function(event){
        event.target.mute()
      }
    }
  })
}

window.addEventListener("scroll", function() {
  if (window.scrollY < player.getIframe().offsetTop &&
      window.scrollY + window.screen.height > player.getIframe().offsetTop + player.getIframe().offsetHeight) {
    // 動画再生
    player.playVideo()
  } else {
    // 動画停止
    player.pauseVideo()
  }
})
</script>
<script src="https://www.youtube.com/iframe_api"></script>