PHPとJavascriptを使って、Youtube Player API経由で動画を複数埋め込む方法

PHPとJavascriptを使って後述する仕様のページを作ろうとしているのですが、どうしてもうまくいかない部分があり、質問させて頂きます。

###使用言語とAPI

HTML、CSS
PHP
JavaScript
Youtube > IFrame Player API

###目指している仕様

Youtube Player APIを使用して動画を複数埋め込む。
サムネイル画像をクリックするとモーダルウィンドウが出現し、動画再生開始。
1つの動画につき、最初の一回の再生時に、10秒間の広告が流れる。
広告は5秒後にスキップ可能。
モーダルウィンドウは「Close」ボタン、或はモーダルウィンドウの外側をクリックすると閉じ、動画も一時停止する。
閉じたモーダルウィンドウのサムネイル画像を再度クリックすると、モーダルウィンドウが再度開き、動画の続きが自動的に再生される（広告は流れない）。

###コード
現在、以下のようなコードを書きましたが、後述する問題点が発生し、解決できずにいます。

デモサイト

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>Modal Window</title>
6	<link rel="stylesheet" href="styles.css">
7</head>
8<body>
9
10<?php $youtube_id_list = array("vH_hAucdcQM", "g-FpDQ8Eqw8", "H2aW5V46khA"); ?>
11<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
12
13
14
15<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
16<div>
17	
18	<div id="open_<?php echo $key; ?>" class="open"><img src="http://i.ytimg.com/vi/<?php echo $youtube_id; ?>/sddefault.jpg" width="200px"></div>
19	<div id="mask_<?php echo $key; ?>" class="mask hidden"></div>
20	<div id="modal_<?php echo $key; ?>" class="mask hidden">
21		<div id="sample_<?php echo $key; ?>"></div>
22		
23		<!--広告スペース-->
24		<div id="ad_<?php echo $key; ?>" class="ad" style="display:none;">
25			<div id="count-down_<?php echo $key; ?>" class="count-down"><span id="timer_<?php echo $key; ?>">05.00</span>秒後にスキップ可能</div>
26			<button id="skip_<?php echo $key; ?>" style="display:none;">広告をスキップ</button>
27		</div>
28		<div id="gaugeBack_<?php echo $key; ?>" class="gaugeBack" style="display:none"></div>
29		<div id="gauge_<?php echo $key; ?>" class="gauge" style="display:none"></div>
30		<!--/広告スペース-->
31		
32		<div id="close_<?php echo $key; ?>" class="close">Close</div>
33	</div>
34</div>
35<?php endforeach; ?>
36
37
38
39<script>
40<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
41(function() {
42	'use strict';
43	
44	var open = document.getElementById('open_<?php echo $key; ?>');
45	var close = document.getElementById('close_<?php echo $key; ?>');
46	var modal = document.getElementById('modal_<?php echo $key; ?>');
47	var mask = document.getElementById('mask_<?php echo $key; ?>');
48	
49	open.addEventListener('click', function() {
50		modal.className = 'modal';
51		mask.className = 'mask';
52	});
53	
54	close.addEventListener('click', function() {
55		modal.className = 'modal hidden';
56		mask.className = 'mask hidden';
57	});
58	
59	mask.addEventListener('click', function() {
60		close.click();
61	});
62})();
63<?php endforeach; ?>
64</script>
65
66
67<script>
68// IFrame Player API の読み込み
69var tag = document.createElement('script');
70tag.src = "https://www.youtube.com/iframe_api";
71var firstScriptTag = document.getElementsByTagName('script')[0];
72firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
73 
74// YouTube ID と埋め込むエリア
75var youtubeData = [
76	<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
77	{
78		youtubeIid: '<?php echo $youtube_id; ?>',
79		embedArea: 'sample_<?php echo $key; ?>'
80	}
81	<?php
82	if($youtube_id != end($youtube_id_list)) {
83		echo ",";
84	}
85	?>
86	<?php endforeach; ?>
87];
88 
89// サムネイルの埋め込み
90function onYouTubeIframeAPIReady() {
91  for (var i = 0; i < youtubeData.length; i++) {
92    //document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
93    // 埋め込んだサムネイルにイベント追加
94    embedYoutube(i);
95  }
96}
97 
98// YouTubeの埋め込みの準備
99var ytPlayer;
100function embedYoutube(num) {
101
102	var i = 0;
103	
104	// サムネイルクリック
105	document.getElementById('open_' + num).addEventListener('click', function() {
106	
107		if(i == 0) {
108			$("#ad_" + num).show();
109			$("#gaugeBack_" + num).show();
110			$( "#gauge_" + num ) . animate( { width: 'toggle',}, { duration: 10000, easing: 'swing', } );
111			
112			setTimeout(function() {
113				$("#count-down_" + num).hide();
114				$("#skip_" + num).show();
115			}, 5000);
116			
117			// スキップボタンがクリックされた時の処理
118			$('#skip_' + num).click(function() {
119				$("#ad_" + num).hide();
120				$("#gauge_" + num).hide();
121				$("#gaugeBack_" + num).hide();
122				clearTimeout(playVideoTimer);
123				
124				ytPlayer = new YT.Player(
125					youtubeData[num]['embedArea'], // 埋め込む場所の指定
126					{
127						width: 640, // プレーヤーの幅
128						height: 390, // プレーヤーの高さ
129						videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
130						events: {
131							'onReady': onPlayerReady,
132							'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
133						}
134					}
135				);
136				
137				return;
138			});
139			i++;
140			
141			// 10秒後に動画再生
142			playVideoTimer = setTimeout(function(){
143			
144				$("#ad_" + num).hide();
145				$("#gauge_" + num).hide();
146				$("#gaugeBack_" + num).hide();
147				
148				ytPlayer = new YT.Player(
149					youtubeData[num]['embedArea'], // 埋め込む場所の指定
150					{
151						width: 640, // プレーヤーの幅
152						height: 390, // プレーヤーの高さ
153						videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
154						events: {
155							'onReady': onPlayerReady,
156							'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
157						}
158					}
159				);
160			},10000);
161		}
162		
163		
164		else {
165			document.getElementById('open_' + num).addEventListener('click', function() {
166				$("#ad_" + num).hide();
167				$("#gauge_" + num).hide();
168				$("#gaugeBack_" + num).hide();
169				
170				ytPlayer = new YT.Player(
171					youtubeData[num]['embedArea'], // 埋め込む場所の指定
172					{
173						width: 640, // プレーヤーの幅
174						height: 390, // プレーヤーの高さ
175						videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
176						events: {
177							'onReady': onPlayerReady,
178							'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
179						}
180					}
181				);
182			});
183		}
184		
185
186		
187		document.getElementById('close_' + num).addEventListener('click', function() {
188			clearTimeout(playVideoTimer);
189		});
190		
191		document.getElementById('mask_' + num).addEventListener('click', function() {
192			document.getElementById('close_'  + num).click();
193		});
194	
195	});
196}
197 
198// プレーヤー読み込み後の処理
199function onPlayerReady(event) {
200	event.target.playVideo();
201	
202	<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
203	document.getElementById('close_<?php echo $key; ?>').addEventListener('click', function() {
204			ytPlayer.pauseVideo();
205	});
206	
207	document.getElementById('mask_<?php echo $key; ?>').addEventListener('click', function() {
208		document.getElementById('close_<?php echo $key; ?>').click();
209	});
210	<?php endforeach; ?>
211}
212
213
214// プレーヤーの状態が変更されたとき
215function onPlayerStateChange(event) {
216   // 現在のプレーヤーの状態を取得
217   var ytStatus = event.data;
218  // 再生終了したとき
219 if (ytStatus == YT.PlayerState.ENDED) {
220     console.log('再生終了');
221      // 動画再生
222     event.target.playVideo();
223   }
224   // 再生中のとき
225   if (ytStatus == YT.PlayerState.PLAYING) {
226       console.log('再生中');
227   }
228   // 停止中のとき
229   if (ytStatus == YT.PlayerState.PAUSED) {
230        console.log('停止中');
231   }
232   // バッファリング中のとき
233  if (ytStatus == YT.PlayerState.BUFFERING) {
234     console.log('バッファリング中');
235  }
236   // 頭出し済みのとき
237 if (ytStatus == YT.PlayerState.CUED) {
238      console.log('頭出し済み');
239 }
240}
241</script>
242
243
244</body>
245</html>

###問題点

Closeボタン（或はモーダルウィンドウの外側）をクリックし、動画を一時停止にするプログラムが、2回目までは正常に作動するのですが、3回目以降はコンソールログに下記のエラーが発生し、正常に作動しない。

sample.php:425 Uncaught TypeError: ytPlayer.pauseVideo is not a function
at HTMLDivElement.<anonymous> (sample.php:425)
at HTMLDivElement.<anonymous> (sample.php:268)

広告を表示中にCloseボタン（或はモーダルウィンドウの外側）をクリックし、広告の表示時間（10秒以内）中に再度サムネイルをクリックしてモーダルウィンドウを出すと、広告終了後、動画の再生が始まらない。
コードの下記の部分を削除すると、上記のCloseボタンの問題は起きないのですが、広告が自動で消えてくれないのと、動画の再生が自動的に始まらない（該当コードを削除しているので当然ではありますが）。

lang
1else {
2	document.getElementById('open_' + num).addEventListener('click', function() {
3		$("#ad_" + num).hide();
4		$("#gauge_" + num).hide();
5		$("#gaugeBack_" + num).hide();
6		
7		ytPlayer = new YT.Player(
8			youtubeData[num]['embedArea'], // 埋め込む場所の指定
9			{
10				width: 640, // プレーヤーの幅
11				height: 390, // プレーヤーの高さ
12				videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
13				events: {
14					'onReady': onPlayerReady,
15					'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
16				}
17			}
18		);
19	});
20}

###補足

Javascriptの中にPHPのコードが埋め込まれていたり、関数化すべきところができてなかったりといった、質問事項以外でのツッコミどころも多々あるかと思いますが、何分未熟者故に、ご容赦頂けましたら幸いです。勿論、そういった点のアドバイスも頂ける場合も、私としましては大歓迎です。
Closeボタンを押してモーダルウィンドウを閉じて動画を一時停止した後、再度モーダルウィンドウを出した際に、自動で動画が再生されるようにしたいのですが、上記の問題が発生したため、この部分は未実装状態となっています。いずれ実装する予定です。

###参考にしたサイト

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。

再生するたびに下記のコードを記述していましたが、それがエラーの元でした。

JavaScript
1ytPlayer = new YT.Player(
2	youtubeData[num]['embedArea'], // 埋め込む場所の指定
3	{
4		width: 640, // プレーヤーの幅
5		height: 390, // プレーヤーの高さ
6		videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
7		events: {
8			'onReady': onPlayerReady,
9			'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
10		}
11	}
12);