<!DOCTYPE html>
<html>
<head>
<title>Dynamic Javascript and the YouTube API - Thanks to https://developers.google.com/youtube/iframe_api_reference ... RJM Programming - May, 2018</title>
</head>
<body>

<table border=1 style=width:100%;height:100vh;>
<tr><td id="vplayer1"></td><td id="vplayer2"></td><td id="vplayer3"></td></tr>
<tr><td id="vplayer4"></td><td id="vplayer5"></td><td id="vplayer6"></td></tr>
<tr><td id="vplayer7"></td><td id="vplayer8"></td><td id="vplayer9"></td></tr>
</table>

<script>
var vplayer=[];
var yid=['zPv0S1-ETdI','qYf35nBq8Oo','Se3kxManWUY','i7hk-TupE5g','LnK0tnaNUag','dbH4Amzn-Rk','BL-Jg7CyqLQ','0v7Ea7kg2gA','NRjWEE0hmjQ'];
var done=[];
var stopthese=[]
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
//var vplayer1, vplayer2;
function onYouTubeIframeAPIReady() {
for (var ii=1; ii<=yid.length; ii++) {
done.push(false);
vplayer.push(eval("new YT.Player('vplayer" + ii + "', { height: '260', width: '33%', videoId: '" + yid[-1 + ii] + "', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }})"));
}
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) { // && !done) {
stopthese.push(event.target);
setTimeout(stopVideo, 6000);
//done = true;
}
}

function stopVideo() {
stopthese[0].stopVideo();
stopthese.shift();
}

</script>
</body>
</html>