<!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>
<a onclick="location.href='#dshuffle';" id=ashuffle title=Shuffles style='display:block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🔀</a>

<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>
<tr style=display:none;><td id="vplayer10"></td><td id="vplayer11"></td><td id="vplayer12"></td></tr>
<tr style=display:none;><td id="vplayer13"></td><td id="vplayer14"></td><td id="vplayer15"></td></tr>
<tr style=display:none;><td id="vplayer16"></td><td id="vplayer17"></td><td id="vplayer18"></td></tr>
<tr style=display:none;><td id="vplayer19"></td><td id="vplayer20"></td><td id="vplayer21"></td></tr>
<tr style=display:none;><td id="vplayer22"></td><td id="vplayer23"></td><td id="vplayer24"></td></tr>
</table>
<div id=dshuffle style=visibility:hidden;display:inline-block;><a onclick="location.href='#ashuffle';" id=zshuffle title=Top style='display:block;font-size:8px;cursor:pointer;text-decoration:none;visibility:hidden;'>🎥</a><br><select id=sshuffle style=display:inline-block; multiple><option value=''>Single selections shuffle with your choice first played (for up to 9 slots available), below ...</option></select> <input onclick=process(this); type=button id=bshuffle style=display:inline-block;background-color:yellow; value=Shuffle></input></div>
<script>

function process(bsin) {
var jj=0, mbo='', mlist='', mdelim='';
var sin=document.getElementById(bsin.id.replace('b','s'));
for (var i=0; i<sin.options.length; i++) {
if (sin.options[i].selected) {
if (sin.options[i].value != '') {
jj++;
mbo=sin.options[i].value.split('|')[0];
mlist+=mdelim + sin.options[i].value.split('|')[0];
mdelim=',';
}
}
}
if (jj == 1) {
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=') + '&mustbeone=' + encodeURIComponent(mbo)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
} else if (jj > 1) {
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=').replace('videolist=','videoxxxlist=') + '&videolist=' + encodeURIComponent(mlist)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
}
}

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 scont='<option value="">Single selections shuffle with your choice first played (for up to 9 slots available), below ...</option>';
var splaycnt=0;
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=location.search.split('videolist=')[1] ? eval("['" + decodeURIComponent(location.search.split('videolist=')[1].split('&')[0]).replace(/\,/g,"','") + "']") : 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']);
var mbo=location.search.split('mustbeone=')[1] ? decodeURIComponent(location.search.split('mustbeone=')[1].split('&')[0]) : '';

if (mbo != '') {
var oyid=[mbo];
for (var iu=0; iu<yid.length; iu++) {
if (yid[iu] != mbo) {
oyid.push(yid[iu]);
}
}
yid=oyid;
}

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) {
var dis, cti, gvd, uri, jis, prv='', iyi=0, huht='';
uri=event.target.getVideoUrl();
jis=yid.indexOf(uri.split('=')[1].split('&')[0]);
dis=event.target.getDuration();
cti=event.target.getCurrentTime();
gvd=event.target.getVideoData().title;
yid[jis]+='|' + dis + '|' + cti + '|' + gvd;
//alert(yid[jis]);
splaycnt++;
if (splaycnt > 9) {
if (scont.indexOf(yid[jis]) == -1) {
prv=scont;
scont=prv.split('</option>')[0] + '</option><option value="' + yid[jis] + '">' + gvd + '</option>' + prv.replace(prv.split('</option>')[0] + '</option>','');
}
} else {
scont+='<option value="' + yid[jis] + '">' + gvd + '</option>';
if (splaycnt == 9 && yid.length > 9) {
for (iyi=0; iyi<yid.length; iyi++) {
if (scont.indexOf(yid[iyi]) == -1) {
try {
huht=yplayer[splaycnt].getVideoData().title;
prv=scont;
scont=prv.split('</option>')[0] + '</option><option value="' + yid[iyi] + '">' + gvd + '</option>' + prv.replace(prv.split('</option>')[0] + '</option>','');
} catch(rtde) {
}
}
}
}
}
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() {
if (yid.length > 9) {
document.getElementById('ashuffle').style.visibility='visible';
document.getElementById('zshuffle').style.visibility='visible';
document.getElementById('sshuffle').size=eval(-1 + eval('' + scont.split('</option>').length));
document.getElementById('sshuffle').innerHTML=scont;
document.getElementById('dshuffle').style.visibility='visible';
}
dostop=false;
}

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

setTimeout(undostop, 9000);

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