Youtube動画の複数埋め込み+inview時再生

以下2つのリンクを参考に私なりにアレンジして、複数動画の埋め込み+inview時自動再生を試してみました。

参考
埋め込んだYouTubeでFacebookみたいな動画自動再生を実装した話。スクロールで再生するやつ - Qiita
同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする | cly7796.net


html**

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Youtube複数埋め込み、inview時に再生</title>
	<script type="text/javascript" src="js/jQuery1.8.2.js"></script>
	<style>
		*{margin:0;
			padding:0;}
		ul{margin:500px 0 1000px;
		text-align:center;}
		li{margin-bottom:500px;}	
	</style>
</head>
<body>

<ul>
	<!-- .video01 -->
	<li class="each_area video01">
		<div id="player01"></div>
	</li><!-- .each_area -->
	<!-- .video02 -->

	<li class="each_area video02">
		<div id="player02"></div>
	</li><!-- .each_area -->
	<!-- .video03 -->

	<li class="each_area video03">
		<div id="player03"></div>
	</li><!-- .each_area -->

	<!-- .video04 -->
	<li class="each_area video04">
		<div id="player04"></div>
	</li><!-- .each_area -->
</ul>

<script>
// プレーヤーのサイズを指定
var ytWidth = 640;
var ytHeight = 390;
// var ytEvent = {
//       "onReady": function(event){
//         // ミュート設定をする
//         event.target.mute()
//       }
//     };
var ytEvent = {
      "onReady": function(event){
        // 音あり設定をする
        
      }
    };


 
// 埋め込むyoutubeのIDと埋め込むエリアを指定
var ytData = [
    {
        id: 'z8Kt1gXL_2M',
        area: 'player01'
    }, {
        id: 'gjEBGJVgCTE',
        area: 'player02'
    }, {
        id: 'BA8hry-UjY0',
        area: 'player03'
    }, {
        id: 'McRmF9ccjUA',
        area: 'player04'
    }
];
 
var ytPlayer = [];
var ytPlaying, ytStop, ytPlay;
 
// YouTube Player APIを読み込む
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
// API読み込み後に、各エリアにプレーヤーを埋め込む
function onYouTubeIframeAPIReady() {
    for(var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
            height: ytHeight,
            width: ytWidth,
            videoId: ytData[i]['id'],
            events: ytEvent
        });
    }
}





// スクロールイベント
window.addEventListener("scroll", function() {

	for(var i = 0; i < ytData.length; i++) {
        // var thisState = ytPlayer[i].getPlayerState();
        var thisPlayer = ytPlayer[i];


        console.log(thisPlayer);
        // 画面内にプレイヤーがあるかを判定
  	


	// 画面内にプレイヤーがあるかを判定
  	if (window.scrollY < thisPlayer.getIframe().offsetTop &&
      	window.scrollY + window.screen.height > thisPlayer.getIframe().offsetTop + thisPlayer.getIframe().offsetHeight) {
    // 動画再生
    	thisPlayer.playVideo()
 		 } else {
    	// 動画停止
    	thisPlayer.pauseVideo()
  		}


    }
})
</script>
<script src="https://www.youtube.com/iframe_api"></script>	
</body>
</html>