<!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>

function shuffle(array) { // thanks to https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var currentIndex = array.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...
while (0 !== currentIndex) {

// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

return array;
}

var vplayer=[];
var yid=['zPv0S1-ETdI','qYf35nBq8Oo','Se3kxManWUY','i7hk-TupE5g','LnK0tnaNUag','dbH4Amzn-Rk','BL-Jg7CyqLQ','0v7Ea7kg2gA','NRjWEE0hmjQ'];
yid=['ARt9HV9T0w8#GG','OAfxs0IDeMs#Heart','huavJMGUbiI#BB'];
yid=shuffle(['h2r59-Xmge4','yT1iDKkZNYU','S-u6qdeaPoE','Nm-ISatLDG0','Gs069dndIYk','dwxjpIJm9JM','8iwBM_YB1sE','CS9OO0S5w2k','I_izvAbhExY','xFrGuyw1V8s','T6fVDAjs9f0','gQ8O9SidZbs','_QNEf9oGw8o','1ff29VSvP_s','4-Vz6tNfV1Y','Zi_XLOBDo_Y','xfmZRiePkEM','iPUmE-tne5U','m5y2GaW0MZA','yioNn7XS-bw','XKuJUxGntRI','vsBak0oCgdY','eBpYgpF1bqQ','Q8xuUdI1an0','Q8xuUdI1an0']);

var dostop=true;
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) {
if (dostop) {
stopthese.push(event.target);
setTimeout(stopVideo, 6000);
}
//done = true;
}
}

function undostop() {
dostop=false;
}

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

setTimeout(undostop, 9000);

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