{"id":50497,"date":"2020-10-07T03:01:20","date_gmt":"2020-10-06T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50497"},"modified":"2020-10-06T15:14:53","modified_gmt":"2020-10-06T05:14:53","slug":"the-wrecking-crew-dynamic-javascript-youtube-embedded-api-peer-genericity-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-peer-genericity-tutorial\/","title":{"rendered":"The Wrecking Crew Dynamic Javascript YouTube Embedded API Peer Genericity Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Peer Genericity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew_genericity_peer.jpg\" title=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Peer Genericity Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">The Wrecking Crew Dynamic Javascript YouTube Embedded API Peer Genericity Tutorial<\/p><\/div>\n<p>Today we are genericizing (and thereby personalising) on top of the work of <a title='The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial' href='#twcdjyteapiwit'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial<\/a> the recently &#8220;made over&#8221; &#8220;The Wrecking Crew&#8221; and &#8220;Disco&#8221; <a title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>IFrame Player API<\/a> web applications, which now have a &#8220;peer&#8221; relationship, by allowing for &#8230;<\/p>\n<ul>\n<li>comma separated YouTube video ID list (that can be entered into the topmost textbox)<\/li>\n<li>vertical bar delimited user defined video list Title<\/li>\n<\/ul>\n<p>But what are we getting at by saying we are developing a peer relationship?  It means via new select (dropdown) elements up the top of each, have URL values that when selected, can navigate you to, and the form of these URLs can be &#8230;<\/p>\n<ul>\n<li>the &#8220;home&#8221; default web application<\/li>\n<li>the &#8220;other&#8221; web application (ie. for &#8220;The Wrecking Crew&#8221; the &#8220;other&#8221; web application is &#8220;Disco&#8221;, and vice versa)<\/li>\n<li>user defined comma separated YouTube video ID list URLs &#8230;<\/li>\n<\/ul>\n<p> &#8230; saved away for optional recall via window.<a target=_blank title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> logic, that is reflected by a hard coded web application title within a span element mapped to a select (dropdown) element within that same span element when the user has stored such a user defined list in localStorage &#8230;<\/p>\n<p><code><br \/>\nvar ourtwc=location.search.split('aprefix=')[1] ? decodeURIComponent(location.search.split('aprefix=')[1].split('&')[0]) : 'disco';<br \/>\nvar yourtwc=\"Disco\";<br \/>\nif (ourtwc != 'disco') { yourtwc=location.search.split('atitle=')[1] ? decodeURIComponent(location.search.split('atitle=')[1].split('&')[0]) : \"Your List\"; }<br \/>\nif (document.URL.indexOf('clear=') != -1) {<br \/>\n    if (window.localStorage) {<br \/>\n      localStorage.removeItem('list' + ourtwc);<br \/>\n      localStorage.removeItem(ourtwc + 'list');<br \/>\n      if (ourtwc != 'disco') { location.href=document.URL.split('?')[0].split('#')[0]; }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\n      function ddit(yts) {<br \/>\n        var outsug=yts, thisttl='', outyts=yts, yoursug='', sofarc='', altttl='';<br \/>\n  var ione=1;<br \/>\n  var lastlslook=' ';<br \/>\n  if (window.localStorage) {<br \/>\n      while (lastlslook != '') {<br \/>\n       outsug=('000' + ione).slice(-3);<br \/>\n       lastlslook=decodeURIComponent(('' + localStorage.getItem('list' + outsug))).replace(\/\\+\/g,' ').replace(\/^null$\/g,'').trim();<br \/>\n  console.log('yts=' + yts + ' and ione=' + ione + ' and lastlslook=' + lastlslook);<br \/>\n       if (lastlslook.toLowerCase().indexOf('http') == 0) {<br \/>\n         sofarc+=lastlslook;<br \/>\n         \/\/alert(lastlslook + ' ... ' + outyts);<br \/>\n         if (lastlslook.indexOf('&atitle=') != -1) {<br \/>\n           thisttl=decodeURIComponent(lastlslook.split('&atitle=')[1].split('&')[0].split('#')[0]);<br \/>\n         } else {<br \/>\n           thisttl=outsug;<br \/>\n         }<br \/>\n         if (outyts.indexOf('&lt;SELECT') == -1) {<br \/>\n           if (yts == 'Disco') {<br \/>\n           console.log('a');<br \/>\n             outyts=\"&lt;SELECT id=syztitle onchange='location.href=this.value;'&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0] + \"'&gt;Disco&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0].replace('\/disco_version.','\/the_wrecking_crew.') + \"'&gt;The Wrecking Crew&lt;\/option&gt;&lt;\/SELECT&gt;\";<br \/>\n           } else if (document.URL.indexOf('atitle=') != -1) {<br \/>\n           altttl=decodeURIComponent(document.URL.split('atitle=')[1].split('&')[0].split('#')[0]);<br \/>\n           console.log('ta:' + thisttl);<br \/>\n             outyts=\"&lt;SELECT id=syztitle onchange='location.href=this.value;'&gt;&lt;option value='\" + document.URL.split('#')[0] + \"'&gt;\" + altttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + altttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0] + \"'&gt;Disco&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0].replace('\/disco_version.','\/the_wrecking_crew.') + \"'&gt;The Wrecking Crew&lt;\/option&gt;&lt;\/SELECT&gt;\";<br \/>\n           } else if (document.URL.indexOf('aprefix=') != -1) {<br \/>\n           altttl=decodeURIComponent(document.URL.split('aprefix=')[1].split('&')[0].split('#')[0]);<br \/>\n           console.log('tb:' + thisttl);<br \/>\n             outyts=\"&lt;SELECT id=syztitle onchange='location.href=this.value;'&gt;&lt;option value='\" + document.URL.split('#')[0] + \"'&gt;\" + altttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + altttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0] + \"'&gt;Disco&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0].replace('\/disco_version.','\/the_wrecking_crew.') + \"'&gt;The Wrecking Crew&lt;\/option&gt;&lt;\/SELECT&gt;\";<br \/>\n           } else {<br \/>\n           console.log('b');<br \/>\n             outyts=\"&lt;SELECT id=syztitle onchange='location.href=this.value;'&gt;&lt;option value='\" + lastlslook.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0] + \"'&gt;Disco&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0].replace('\/disco_version.','\/the_wrecking_crew.') + \"'&gt;The Wrecking Crew&lt;\/option&gt;&lt;\/SELECT&gt;\";<br \/>\n           }<br \/>\n         } else if (lastlslook.toLowerCase().indexOf('http') == 0 && outyts.indexOf(\"&lt;option value='\" + lastlslook.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;\") == -1) {<br \/>\n             outyts=outyts.replace(\"&lt;\/SELECT&gt;\",\"&lt;option value='\" + lastlslook.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + lastlslook.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + thisttl + \"&lt;\/option&gt;&lt;\/SELECT&gt;\");<br \/>\n         }<br \/>\n       } else if (outyts.indexOf('&lt;SELECT') == -1) {<br \/>\n           if (yts != 'Disco' && document.URL.indexOf('clear=') == -1) {<br \/>\n  console.log('Yts=' + yts + ' and ione=' + ione + ' and lastlslook=' + lastlslook);<br \/>\n             if (yourtwc.replace(\"Disco\",\"\") != '') {<br \/>\n               thisttl=yourtwc;<br \/>\n             } else {<br \/>\n               thisttl=outsug;<br \/>\n             }<br \/>\n           console.log('c');<br \/>\n             outyts=\"&lt;SELECT id=syztitle onchange=location.href=this.value;&gt;&lt;option value='\" + document.URL.split('#')[0] + \"'&gt;\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('#')[0].replace('?','?clear=y&') + \"'&gt;-\" + thisttl + \"&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0] + \"'&gt;Disco&lt;\/option&gt;&lt;option value='\" + document.URL.split('?')[0].split('#')[0].replace('\/disco_version.','\/the_wrecking_crew.') + \"'&gt;The Wrecking Crew&lt;\/option&gt;&lt;\/SELECT&gt;\";<br \/>\n  console.log('Yts=' + yts + ' and outsug=' + outsug + ' and thisttl=' + thisttl);<br \/>\n             localStorage.setItem('list' + outsug, encodeURIComponent(document.URL.split('#')[0]));<br \/>\n       lastlslook=decodeURIComponent(('' + window.localStorage.getItem('list' + outsug))).replace(\/\\+\/g,' ').replace(\/^null$\/g,'').trim();<br \/>\n  console.log('YTs=' + yts + ' and outsug=' + outsug + ' and lastlslook=' + lastlslook);<br \/>\n             sofarc+=document.URL.split('#')[0];<br \/>\n             yoursug=outsug;<br \/>\n           }<br \/>\n       } else {<br \/>\n       }<br \/>\n       ione++;<br \/>\n      }<br \/>\n  }<br \/>\n        if (yoursug != '') {<br \/>\n          if (sofarc.indexOf(document.URL.split('#')[0]) == -1 && document.URL.indexOf('clear=') == -1) {<br \/>\n          console.log('5');<br \/>\n          window.localStorage.setItem('list' + yoursug, encodeURIComponent(document.URL.split('#')[0]));<br \/>\n          }<br \/>\n        } else if (yts != 'Disco' && sofarc.indexOf(document.URL.split('#')[0]) == -1 && document.URL.indexOf('clear=') == -1) {<br \/>\n          console.log('15');<br \/>\n          window.localStorage.setItem('list' + outsug, encodeURIComponent(document.URL.split('#')[0]));<br \/>\n        }<br \/>\n        if (outyts.toLowerCase().indexOf('&lt;select') == 0) {<br \/>\n            tselih=outyts;<br \/>\n            setTimeout(muchlater, 2000);<br \/>\n        }<br \/>\n        return outyts;<br \/>\n      }<br \/>\n<br \/>\n      function undostop() {<br \/>\n        document.getElementById('sytitle').innerHTML=ddit(yourtwc);<br \/>\n        \/\/ rest of function code<br \/>\n      }<br \/>\n<br \/>\n      setTimeout(undostop, 9000);<br \/>\n<\/code><\/p>\n<p> &#8230; as per &#8230;<\/p>\n<table id=t50497 style='width:100%;border:1px solid red;'>\n<tr><!--th><\/th-->\n<th>The Wrecking Crew<\/th>\n<th>Disco<\/th>\n<\/tr>\n<tr><!--td>Changes<\/td-->\n<td><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html----GETME\" title=\"the_wrecking_crew.html\">the changed HTML<\/a><\/td>\n<td><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html--------GETME\" title=\"disco_version.html\">the changed HTML<\/a><\/td>\n<\/tr>\n<tr><!--td>HTML<\/td-->\n<td><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html----GETME\" title=\"the_wrecking_crew.html\">the_wrecking_crew.html<\/a><\/td>\n<td><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html--------GETME\" title=\"disco_version.html\">disco_version.html<\/a><\/td>\n<\/tr>\n<tr><!--td>Live Run<\/td-->\n<td><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\" title=\"the_wrecking_crew.html\">The Wrecking Crew<\/a><\/td>\n<td><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\" title=\"disco_version.html\">Disco<\/a><\/td>\n<\/tr>\n<tr><!--td>Iframes<\/td-->\n<td style='width:50%;padding:0 0 0 0;'><iframe  src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\" title=\"the_wrecking_crew.html\" style='width:100%;height:1600px;'><\/iframe><\/td>\n<td style='width:50%;padding:0 0 0 0;'><iframe   src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\" title=\"disco_version.html\" style='width:100%;height:1600px;'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-peer-genericity-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Peer Genericity Tutorial<\/a>.<\/p-->\n<hr>\n<p id='twcdjyteapiwit'>Previous relevant <a target=_blank title='The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-web-inspector-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew_web_inspector.jpg\" title=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial<\/p><\/div>\n<p>With the last couple of days of blog posting, including yesterday&#8217;s <a title='The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial' href='#twcdjyteapiot'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial<\/a> we risked the ire of many an internet reader by including in the blog posting itself HTML iframes of those twin &#8220;The Wrecking Crew&#8221; and &#8220;Disco&#8221; <a title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>IFrame Player API<\/a> web applications.  Por que?  Well, it is a bit of a sin to not give fair warning of future sound coming from a computer source of the internet.  And, unless we were dreaming, earlier on this morning Australian Eastern Standard Time, that faux pas was possible.  Sorry, if you were caught out.<\/p>\n<p>We noticed the problem on an iPad, but never, so far, on our MacBook Pro.  And this is quite possible.  The stringency with which <a target=_blank title='Apple' href='https:\/\/apple.com'>Apple<\/a> tries to stop this happening with iOS is <i>very<\/i> noticeable to this programmer.  It is understandable, though, that Apple would want to precede the creation of sound <i>after<\/i> an action (like a button press), so that a real human is part of the decision making.<\/p>\n<p>We weren&#8217;t there ready with the tools to &#8220;scoop up&#8221; the information necessary to debug our &#8220;one off&#8221; iPad disappointment, alas.  What is the next best?  We have a lot of time for the web inspectors of the web browsers back at macOS (for the MacBook Pro).  Team their use with Javascript &#8230;<\/p>\n<p><code><br \/>\nconsole.log([Informational messaging]);<br \/>\n<\/code><\/p>\n<p> &#8230; (not <i>alert([Informational messaging]);<\/i> as we often settle for, but not today with the emphasis on trying to understand &#8230;<\/p>\n<ul>\n<li>the order<\/li>\n<li>the relationship<\/li>\n<\/ul>\n<p> &#8230; among the YouTube IFrame Player API events, without the interference <i>alert([Informational messaging]);<\/i> (Javascript popup windows) could cause) &#8230; and you have a <font color=blue>powerful debugging tool<\/font> at your disposal.  Even better if you can test on the iPad itself with the macOS Safari web browser Web Inspector (and the Apple white lead) as outlined with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-web-audio-piano-mobile-safari-web-inspector-debug-tutorial\/' title='HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial'>HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial<\/a>.<\/p>\n<p><code><br \/>\n      function onPlayerStateChange(event) {<br \/>\n        if (event.data == YT.PlayerState.BUFFERING) { \/\/ && !done) {<br \/>\n              curplay=curplay;<br \/>\n        } else if (event.data == YT.PlayerState.CUED) { \/\/ && !done) {<br \/>\n              curplay=curplay;<br \/>\n        } else if (event.data == YT.PlayerState.PAUSED) { \/\/ && !done) {<br \/>\n              \/\/curv=eval(eval(1 + curv) % eval('' + 9));<br \/>\n              \/\/alert('' + curv);<br \/>\n              if (curplay != '') { precv=curv; precp=curplay; }<br \/>\n              curplay='';<br \/>\n              \/\/vplayer[curv].playVideo();<br \/>\n        } else if (event.data == YT.PlayerState.PLAYING) { \/\/ && !done) {<br \/>\n          if (dostop) {<br \/>\n        <font color=blue>console.log('onPlayerStateChange: dostop');<\/font><br \/>\n          stopthese.push(event.target);<br \/>\n          setTimeout(stopVideo, 6000);<br \/>\n          } else if (curplay == '') {<br \/>\n<br \/>\n          if (precp == event.target.getVideoUrl().split('=')[1].split('&')[0]) {<br \/>\n          \/\/alert(1);<br \/>\n        <font color=blue>console.log('onPlayerStateChange: 2;' +precp);<\/font><br \/>\n              curplay=precp;<br \/>\n              curv=precv;<br \/>\n          } else if (1 == 6) {<br \/>\n          \/\/alert(11);<br \/>\n              mid=precv;<br \/>\n              if (1 == 2) { vplayer[curv].mute(); }<br \/>\n          }<br \/>\n<br \/>\n          curplay=event.target.getVideoUrl().split('=')[1].split('&')[0];<br \/>\n          curdur=eval('' + event.target.getDuration());<br \/>\n        <font color=blue>console.log('onPlayerStateChange: 3;precp=' + precp + ';' + event.target.getVideoUrl() + ';' + curplay + ';' + curdur);<\/font><br \/>\n          for (var ijj=0; ijj&lt;yid.length; ijj++) {<br \/>\n          if (yid[ijj].indexOf(curplay + '|') == 0) { curv=ijj; }<br \/>\n          }<br \/>\n<br \/> <br \/>\n          if (mid &gt;= 0) { setTimeout(midit, 2000);  }<br \/>\n<br \/> <br \/>\n          \/\/}<br \/>\n          \/\/alert(curplay + ' ... ' + curv);<br \/>\n          } else {<br \/>\n          \/\/console.log('' + eval('' + event.target.getCurrentTime()) + ' &gt;= ' + curdur);<br \/>\n          if (eval(2 + eval('' + event.target.getCurrentTime())) &gt;= curdur) {<br \/>\n          \/\/  alert('ready');<br \/>\n              vplayer[curv].mute();<br \/>\n        <font color=blue>console.log('onPlayerStateChange: 4;' + vplayer[curv].getVideoData().title + ';mute;seekTo;unMute;play');<\/font><br \/>\n              curv=eval(eval(1 + curv) % eval('' + 9));<br \/>\n              \/\/alert('' + curv);<br \/>\n              \/\/vplayer[curv]=eval(\"new YT.Player('vplayer\" + eval(1 + curv) + \"', { height: '260', width: '33%', videoId: '\" + yid[curv] + \"', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }})\");<br \/>\n              curplay='';<br \/>\n              vplayer[curv].seekTo(0,true);<br \/>\n              vplayer[curv].unMute();<br \/>\n              vplayer[curv].playVideo();<br \/>\n              \/\/alert('2:' + curv);<br \/>\n          }<br \/>\n          }<br \/>\n          \/\/done = true;<br \/>\n          } else if (curplay != '') {<br \/>\n          \/\/console.log('' + eval('' + event.target.getCurrentTime()) + ' &gt;= ' + curdur);<br \/>\n          if (eval(2 + eval('' + event.target.getCurrentTime())) &gt;= curdur) {<br \/>\n          \/\/  alert('Ready');<br \/>\n              vplayer[curv].mute();<br \/>\n        <font color=blue>console.log('onPlayerStateChange: 5;' + vplayer[curv].getVideoData().title + ';mute;seekTo;unMute;play');<\/font><br \/>\n              curv=eval(eval(1 + curv) % eval('' + 9));<br \/>\n              \/\/alert('' + curv);<br \/>\n              curplay='';<br \/>\n              vplayer[curv].seekTo(0,true);<br \/>\n              vplayer[curv].unMute();<br \/>\n              vplayer[curv].playVideo();<br \/>\n              \/\/alert('3:' + curv);<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n<\/code><\/p>\n<p> &#8230; leading to the eventual <font color=purple>three codeline solution<\/font> you see below &#8230;<\/p>\n<p><code><br \/>\n      \/\/ 4. The API will call this function when the video player is ready.<br \/>\n      function onPlayerReady(event) {<br \/>\n        var dis, cti, gvd, uri, jis, prv='', iyi=0, huht='';<br \/>\n        if (!lsdone) {<br \/>\n          lsdone=true;<br \/>\n          scont=scont.replace('&lt;\/option&gt;', '&lt;\/option&gt;' + tryls());<br \/>\n          \/\/alert(('' + scont.split('&lt;\/option&gt;').length));<br \/>\n        }<br \/>\n        uri=event.target.getVideoUrl();<br \/>\n        jis=yid.indexOf(uri.split('=')[1].split('&')[0]);<br \/>\n        dis=event.target.getDuration();<br \/>\n        cti=event.target.getCurrentTime();<br \/>\n        gvd=event.target.getVideoData().title;<br \/>\n        <font color=blue>console.log('onPlayerReady:' + uri + ';' + dis + '|' + cti + '|' + gvd);<\/font><br \/>\n        yid[jis]+='|' + dis + '|' + cti + '|' + gvd;<br \/>\n        \/\/alert(yid[jis]);<br \/>\n        splaycnt++;<br \/>\n        if (splaycnt &gt; 9) {<br \/>\n          if (scont.indexOf(yid[jis]) == -1) {<br \/>\n          prv=scont;<br \/>\n          if (scont.indexOf('&gt;' + gvd + '&lt;') == -1) { scont=prv.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;&lt;option id=\"' + yid[jis].split('|')[0] + '\" onclick=\"oclick(this);\" value=\"' + yid[jis] + '\"&gt;' + gvd + '&lt;\/option&gt;' + prv.replace(prv.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;',''); }<br \/>\n          }<br \/>\n        } else {<br \/>\n          if (scont.indexOf('&gt;' + gvd + '&lt;') == -1) { scont+='&lt;option id=\"' + yid[jis].split('|')[0] + '\" onclick=\"oclick(this);\" value=\"' + yid[jis] + '\"&gt;' + gvd + '&lt;\/option&gt;'; }<br \/>\n          if (splaycnt == 9 && yid.length &gt; 9) {<br \/>\n            for (iyi=0; iyi&lt;yid.length; iyi++) {<br \/>\n               if (scont.indexOf(yid[iyi]) == -1) {<br \/>\n               try {<br \/>\n                 huht=vplayer[splaycnt].getVideoData().title;<br \/>\n          prv=scont;<br \/>\n          if (scont.indexOf('&gt;' + gvd + '&lt;') == -1) { scont=prv.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;&lt;option id=\"' + yid[iyi].split('|')[0] + '\" value=\"' + yid[iyi] + '\" onclick=\"oclick(this);\"&gt;' + gvd + '&lt;\/option&gt;' + prv.replace(prv.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;',''); }<br \/>\n               } catch(rtde) {<br \/>\n               }<br \/>\n               }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        <font color=purple>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n        event.target.mute();<br \/>\n        }<\/font><br \/>\n        event.target.playVideo();<br \/>\n        event.target.mute();<br \/>\n      }<br \/>\n<\/code><\/p>\n<p> &#8230; and in action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew_web_inspector.jpg\">tutorial picture<\/a> &#8230; and &#8230; <a href='#t50497' title='Up top'>see table up the webpage<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-web-inspector-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial<\/a>.<\/p-->\n<hr>\n<p id='twcdjyteapiot'>Previous relevant <a target=_blank title='The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-onerror-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/twc_onerror.gif\" title=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial<\/p><\/div>\n<p>Again, both yesterday&#8217;s <a title='The Wrecking Crew Dynam ic Javascript YouTube Embedded API Ajax Tutorial' href='#twcdjyteapiat'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> and <a target=_blank title='User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ajax-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> before it can benefit from today&#8217;s improvement idea regarding videos whose creators have stopped their YouTube videos from being able to be launched from non-YouTube websites, as we are asking of YouTube content we link to with our <a title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>IFrame Player API<\/a> driven twin web applications.  What&#8217;s needed to avoid the &#8230;<\/p>\n<blockquote><p>\n<strong>Video unavailable<\/strong><br \/>\n<span style=text-decoration:underline;>Watch this video on YouTube.<\/span><br \/>\nPlayback on other websites has been disabled by the <br \/>\nvideo owner.\n<\/p><\/blockquote>\n<p> &#8230;. issue we are talking about here?  That issue is annoying in two parts &#8230;<\/p>\n<ol>\n<li>cannot play video in that embedded iframe element &#8230; and &#8230;<\/li>\n<li>if playing on a non-mobile platform, encountering an iframe with this error halts any thoughts of &#8220;continuous play&#8221; (like a playlist that repeats and keeps playing, like on the radio) that the user may like (on in the background, while they do something else, for instance)<\/li>\n<\/ol>\n<p>Well, it&#8217;s an event we have to &#8220;kick into play&#8221;, that you ordinarily might be able to ignore, <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n        vplayer.push(eval(\"new YT.Player('vplayer\" + ii + \"', { height: '260', width: '33%', videoId: '\" + yid[-1 + ii] + \"', playerVars: { autoplay: 0, controls: 1, disablekb: 1, loop: 0, modestbranding: 0, showinfo: 0, autohide: 1, color: 'white', iv_load_policy: 3, theme: 'light', rel: 0 },  events: {  <font color=blue>'onError': onProblem,<\/font> 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }})\"));<br \/>\n<\/code><\/p>\n<p> &#8230; calling on a new Javascript event function &#8230;<\/p>\n<p><code><br \/>\n      function onProblem(event) {<br \/>\n        console.log(event.target.f);<br \/>\n        console.log(event.target.l);<br \/>\n        var pvidid='', embedurl='', vtitle='';<br \/>\n        if (event.target.f.outerHTML.indexOf('embed\/') != -1) {<br \/>\n          pvidid=event.target.f.outerHTML.split('embed\/')[1].split('?')[0];<br \/>\n        }<br \/>\n        if (pvidid != '') {<br \/>\n        if (lastscont.indexOf(pvidid) != -1) {<br \/>\n          \/\/ D-TC8CRCIKM|194|0|The Grass Roots - Sooner Or Later - [original STEREO]<br \/>\n          \/\/alert(lastscont.split(pvidid)[1]);<br \/>\n          var vbs=lastscont.split(pvidid)[1].split('|');<br \/>\n          if (eval('' + vbs.length) &gt;= 4) {<br \/>\n            vtitle='' + vbs[3];<br \/>\n          }<br \/>\n        }<br \/>\n        if (event.target.f.outerHTML.indexOf(' class=\"player-unavailable\"') != -1 || pvidid != '') {<br \/>\n          embedurl='http' + event.target.f.outerHTML.split('http')[1].split('\"')[0];<br \/>\n          if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n  var zzhr = new XMLHttpRequest();<br \/>\n  var zzform=new FormData();<br \/>\n  zzform.append('inline', '');<br \/>\n  zzform.append('to', 'rmetcalfe@rjmprogramming.com.au');<br \/>\n  zzform.append('subj', 'Please find alternative to YouTube ' + pvidid + ' in relevant code ... ' + vtitle);<br \/>\n  zzform.append('body', encodeURIComponent('Problem video is first iframe of ... ' + String.fromCharCode(10) + String.fromCharCode(10) + document.URL.split('#')[0].split('?')[0] + '?hastoinclude=' + pvidid + String.fromCharCode(10) + String.fromCharCode(10) + 'Problem YouTube video is ... ' + String.fromCharCode(10) + String.fromCharCode(10) + \"https:\/\/www.youtube.com\/watch?v=\" + pvidid));<br \/>\n  zzhr.open('post', '\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php', true);<br \/>\n  zzhr.send(zzform);<br \/>\n            \/\/var remurl='mailto:rmetcalfe@rjmprogramming.com.au?subject=' + encodeURIComponent('Please find alternative to YouTube ' + pvidid + ' in relevant code ... ' + vtitle) + '&body=' + encodeURIComponent('Problem video is first iframe of ... ' + String.fromCharCode(10) + String.fromCharCode(10) + document.URL.split('#')[0].split('?')[0] + '?hastoinclude=' + pvidid + String.fromCharCode(10) + String.fromCharCode(10) + 'Problem YouTube video is ... ' + String.fromCharCode(10) + String.fromCharCode(10) + \"https:\/\/www.youtube.com\/watch?v=\" + pvidid);<br \/>\n            \/\/if (('' + document.getElementById('badvideo').href).indexOf('mailto') != 0) { document.getElementById('badvideo').href=remurl; document.getElementById('badvideo').click(); }<br \/>\n          } else {<br \/>\n            var emurl='mailto:rmetcalfe@rjmprogramming.com.au?subject=' + encodeURIComponent('Please find alternative to YouTube ' + pvidid + ' in relevant code ... ' + vtitle) + '&body=' + encodeURIComponent('Problem video is first iframe of ... ' + String.fromCharCode(10) + String.fromCharCode(10) + document.URL.split('#')[0].split('?')[0] + '?hastoinclude=' + pvidid + String.fromCharCode(10) + String.fromCharCode(10) + 'Problem YouTube video is ... ' + String.fromCharCode(10) + String.fromCharCode(10) + \"https:\/\/www.youtube.com\/watch?v=\" + pvidid);<br \/>\n            if (('' + document.getElementById('badvideo').href).indexOf('mailto') != 0) { document.getElementById('badvideo').href=emurl; document.getElementById('badvideo').click(); }<br \/>\n          }<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n<\/code><\/p>\n<p> &#8230; which, as you may have gleaned, provides us an email mechanism by which we, here at RJM Programming, can be informed about when a YouTube video ID we reference, perhaps into the future, becomes restrictive, this way <font size=1>(and hopefully we can find an alternative YouTube video ID to use)<\/font> &#8230;  <a href='#t50497' title='Up top'>see table up the webpage<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-onerror-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Onerror Tutorial<\/a>.<\/p-->\n<hr>\n<p id='twcdjyteapilst'>Previous relevant <a target=_blank title='The Wrecking Crew Dynamic Javascript YouTube Embedded API LocalStorage Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-localstorage-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API LocalStorage Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API LocalStorage Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew_ls.jpg\" title=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API LocalStorage Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">The Wrecking Crew Dynamic Javascript YouTube Embedded API LocalStorage Tutorial<\/p><\/div>\n<p>Both yesterday&#8217;s <a title='The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='#twcdjyteapiat'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> and <a target=_blank title='User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ajax-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> before it can benefit from today&#8217;s improvement idea.  That idea involves data storage that stays on the &#8220;client&#8221; side of the &#8220;client\/server&#8221; web application architecture.  Yes, as you may have noticed, these web applications were not offering all the options they could for those user controlled entry list dropdowns at the bottom.<\/p>\n<p>We use the window.<a target=_blank title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> now to gradually store all the content those dropdowns could hold.  So it is as if the web application &#8220;learns its lines&#8221; over time with <font color=blue>these improvements<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var lsdone=false;<br \/>\nif (document.URL.indexOf('clear=') != -1) {<br \/>\n    if (window.localStorage) {<br \/>\n      window.localStorage.removeItem('twclist');<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\nfunction lessopt(selih) {<br \/>\n  var outih=selih, opttoadd='';<br \/>\n  var opta=selih.split('&lt;\/option&gt;');<br \/>\n  if (opta.length &gt; 1) {<br \/>\n  outih='';<br \/>\n  for (var iop=0; iop&lt;opta.length; iop++) {<br \/>\n    if (opta[iop] != '') {<br \/>\n      opttoadd='&lt;option' + opta[iop].split('&lt;option')[1] + '&lt;\/option&gt;';<br \/>\n      if (outih.indexOf(opttoadd) == -1) {<br \/>\n        outih+=opttoadd;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n  return outih;<br \/>\n}<br \/>\n<br \/>\nfunction tryls() {<br \/>\n    var lastscont='';<br \/>\n    if (window.localStorage) {<br \/>\n      lastscont=decodeURIComponent(('' + window.localStorage.getItem('twclist'))).replace(\/\\+\/g,' ').replace(\/^null$\/g,'');<br \/>\n    }<br \/>\n    return lastscont;<br \/>\n}<br \/>\n<br \/>\nfunction setls(towhat) {<br \/>\n    var lastscont='';<br \/>\n    if (window.localStorage) {<br \/>\n      window.localStorage.setItem('twclist', encodeURIComponent(towhat));<br \/>\n    }<br \/>\n    return lastscont;<br \/>\n}<\/font><br \/>\n<br \/>\n      \/\/ 4. The API will call this function when the video player is ready.<br \/>\n      function onPlayerReady(event) {<br \/>\n        var dis, cti, gvd, uri, jis, prv='', iyi=0, huht='';<br \/>\n        <font color=blue>if (!lsdone) {<br \/>\n          lsdone=true;<br \/>\n          scont=scont.replace('&lt;\/option&gt;', '&lt;\/option&gt;' + tryls());<br \/>\n        }<\/font><br \/>\n        \/\/ Rest of code<br \/>\n     }<br \/>\n<br \/> <br \/>\n      function undostop() {<br \/>\n        document.getElementById('xshuffle').style.visibility='visible';<br \/>\n        bprefix=topics.replace(\/\\|\/g, ', ');<br \/>\n        if (bprefix != '') {<br \/>\n          var huhb=document.getElementById('wshuffle').innerHTML;<br \/>\n          document.getElementById('wshuffle').innerHTML=bprefix + ', ' + huhb;<br \/>\n        }<br \/>\n        document.getElementById('wshuffle').style.visibility='visible';<br \/>\n        document.getElementById('pshuffle').style.visibility='visible';<br \/>\n        document.getElementById('qshuffle').style.visibility='visible';<br \/>\n        document.getElementById('rshuffle').style.visibility='visible';<br \/>\n        if (yid.length > 9 || 1 == 1) {<br \/>\n          var tdsl=document.getElementsByTagName('td');<br \/>\n          document.getElementById('oone').innerHTML=document.getElementById('oone').innerHTML.replace(' 9 slots available)', ' 9 slots available, ' + tdsl.length + ' total)');<br \/>\n          document.getElementById('ashuffle').style.visibility='visible';<br \/>\n          document.getElementById('zshuffle').style.visibility='visible';<br \/>\n          <font color=blue>scont=lessopt(scont);<\/font><br \/>\n          document.getElementById('sshuffle').size=eval(-1 + eval('' + scont.split('&lt;\/option&gt;').length));<br \/>\n          document.getElementById('sshuffle').innerHTML=scont;<br \/>\n         <font color=blue>setls(document.getElementById('sshuffle').innerHTML.replace(document.getElementById('sshuffle').innerHTML.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;', ''));<\/font><br \/>\n          document.getElementById('dshuffle').style.visibility='visible';<br \/>\n        }<br \/>\n        document.getElementById('rshuffle').focus();<br \/>\n        dostop=false;<br \/>\n              if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n              \/\/alert(1);<br \/>\n                \/\/const huhss=document.querySelectorAll('video');<br \/>\n              \/\/alert(11);<br \/>\n                for (var hdiv=0; hdiv&lt;vplayer.length; hdiv++) {<br \/>\n              \/\/alert(111);<br \/>\n                  vplayer[hdiv].unMute();<br \/>\n                  \/\/alert(hdiv.id);<br \/>\n                }<br \/>\n                \/\/.webkitEnterFullScreen();<br \/>\n              }<br \/>\n      }<br \/>\n<\/code><\/p>\n<p> &#8230; gleaning information about the videos as they load them (especially the video titles and durations) via the YouTube Embedded Iframe API code for &#8230;  <a href='#t50497' title='Up top'>see table up the webpage<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-localstorage-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API LocalStorage Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='twcdjyteapiat'>Previous relevant <a target=_blank title='The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-ajax-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.jpg\" title=\"The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>It's time for us to revisit the relatively recent <a title='User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='#ucdjyteapiat'>User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> with new content featuring music that \"The Wrecking Crew\" were involved in. We were gobsmacked last weekend listening to  ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li><a target=_blank title='Simon Marnie' href='https:\/\/www.abc.net.au\/radio\/sydney\/programs\/weekendmornings\/'>Weekends with Simon Marnie on 702 radio Sydney, Australia<\/a> on Saturday 26\/9\/2020's \"Sonic Journey\" segment regarding \"The Wrecking Crew\" (Hal Blaine, Glen Campbell etcetera) ...\n\n\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/The_Wrecking_Crew_(music)'>\nThe Wrecking Crew was a loose collective of session musicians based in Los Angeles whose services were employed for thousands of studio recordings in the 1960s and 1970s, including several hundred Top 40 hits. The musicians were not publicly recognized in their era, but were viewed with reverence by industry insiders. They are now considered one of the most successful and prolific session recording units in music history.\n<\/blockquote>\n\n\n ... and their huge influence on the music of the 60's and early 70's (and beyond, especially regarding work with <a target=_blank title='Phil Spector info from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Phil_Spector'>Phil Spector<\/a>) \n<\/li>\n\n\n\n\n<li>Wikipedia's great online resource <a target=_blank title='The Wrecking Crew information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/The_Wrecking_Crew_(music)'>The Wrecking Crew<\/a><\/li>\n\n\n\n\n<li><a title='User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='#ucdjyteapiat'>User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a>'s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html---GETME\" title=\"disco_version.html\">disco_version.html<\/a> use of <a title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a>'s <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>IFrame Player API<\/a> as a basis to ...<\/li>\n\n\n\n\n<ol>\n\n\n<li>two finger gesture over a Wikipedia song link and choose 'Search Google for \"Song Title\"'<\/li>\n\n\n\n\n<li>up at <a title='Google' href='https:\/\/google.com'>Google<\/a> two finger gesture relevant YouTube link and choose 'Copy Link Address'<\/li>\n\n\n\n\n<li>add to code's array stripping out all but the 11 character YouTube video ID<\/li>\n\n\n<\/ol>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... and let this great music of the 60's and early 70's roll!  You can see how this all happened at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html_GETME\" title=\"the_wrecking_crew.html\">the_wrecking_crew.html<\/a>'s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_wrecking_crew.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-ajax-tutorial\/'>The Wrecking Crew Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ucdjyteapiat'>Previous relevant <a target=_blank title='User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ajax-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version_ajax.jpg\" title=\"User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/p><\/div>\n<p>Around here we have our favourite Javascript and PHP function names.  And in that list, the Javascript &#8220;ajaxit([argument1])&#8221; features strongly and commonly.  <strike>After reaching below the sink <\/strike>After talking excitedly to the kitchen taps about my plans <font size=2>&#8230; oddly, receiving no reply <\/font><font size=1>&#8230; probably because it&#8217;s a Monday here <\/font><font size=2>&#8230; we expect &#8230;<\/font> we use that Javascript client Ajax approach that can do for you what you would often call on a serverside language, like PHP, to do?!  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone, anyone?<\/a>  No, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Barbara_Woodhouse'>Barbara Woodhouse<\/a>, we do not <strike>w<\/strike>release the <a target=_blank title='' href='https:\/\/www.google.com\/search?rlz=1C5CHFA_enAU832AU832&#038;sxsrf=ACYBGNSyRD7B4RSZAg-emjuN_GjL7sFi9A%3A1577070309859&#038;ei=5S4AXpeSNN2F4-EPxbq5oAM&#038;q=tap+dancing+dog&#038;oq=tap+dancing+dog&#038;gs_l=psy-ab.3..35i39j0j0i30j0i8i30.2004.2004..2302...0.2..0.242.242.2-1......0....1..gws-wiz.......0i71.22jPVaEGIkk&#038;ved=0ahUKEwjXmOvc5MrmAhXdwjgGHUVdDjQQ4dUDCAs&#038;uact=5'>tap dancing dogs<\/a> on Mondays &#8230; ever &#8230; any more serious suggestions please?   Yes, <a target=_blank title='' href='https:\/\/en.wikipedia.org\/wiki\/Jesse_James_Garrett'>Jesse James Garrett<\/a> it&#8217;s interesting your blurtings include &#8230;<\/p>\n<blockquote cite=''><p>\nthe asynchronous technology behind emerging services like Google Maps and Google Suggest, as well as the resulting user experience which made it possible to browse without interruption by eliminating the reloading of the whole page\n<\/p><\/blockquote>\n<p> &#8230; though I&#8217;d like you to run a plagorism checker on all &#8220;blurtings&#8221; and &#8220;lerts&#8221; for the next lesson please.<\/p>\n<p>Yes, under certain conditions, <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> (methodologies) can retrieve information and not have to leave what you are interacting with on the current webpage, to do this.<\/p>\n<p>Can you imagine how we might apply this with our current project?   Yes, patently not everyone is in the mood for &#8220;Disco&#8221;, especially on the first draft way back when, when we allowed sound to happen before a decently &#8220;flagged&#8221; button press to forewarn &#8230; a fairly big &#8220;Internet sin&#8221;, since fixed.  And so, we now add HTML input textbox (ie.type=text) element, with <i>onblur<\/i> event &#8220;ajaxit([argument1])&#8221; logic (passing across the textbox&#8217;s value) as per &#8230;<\/p>\n<p><code><br \/>\nvar zhr=null;<br \/>\nvar url='';<br \/>\nvar zok=0;<br \/>\n<br \/>\nfunction ajaxit(qsel) {<br \/>\n  if (qsel != '') {<br \/>\n   url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.php?url=\" + encodeURIComponent(\"http:\/\/www.youtube.com\/results?search_query=\" + encodeURIComponent(qsel));<br \/>\n   if (!zhr) {<br \/>\n     zhr = getXMLHttpRequest();<br \/>\n   }<br \/>\n<br \/>\n   if (zhr != null) {<br \/>\n    zhr = zhr;<br \/>\n   } else {<br \/>\n    try {<br \/>\n     zhr = new ActiveXObject(\"Msxml2.XMLHTTP\");<br \/>\n    } catch (othermicrosoft) {<br \/>\n     try {<br \/>\n      zhr = new ActiveXObject(\"Microsoft.XMLHTTP\");<br \/>\n     } catch (failed) {<br \/>\n      zhr = false;<br \/>\n     }<br \/>\n    }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   if (zhr) {<br \/>\n     if (url != '') {<br \/>\n     zok=0;<br \/>\n     zhr.open(\"GET\", url, true);<br \/>\n     zhr.onreadystatechange = showStuff;<br \/>\n     zhr.send(null);<br \/>\n     url='';<br \/>\n     }<br \/>\n   } else {<br \/>\n     zok = 1; \/\/alert(\"Sorry ... no XMLHttpRequest possible\");<br \/>\n   }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to add new concepts into the mix of option (sub)elements offered off that aforesaid mentioned (multiple selection mode) dropdown (of YouTube videos).  As an optional &#8220;off default workflow&#8221; piece of functionality we show it prominently (above the fold) now, as well as &#8220;below the fold&#8221; where the dropdown is positioned on the webpage of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html---GETME\" title=\"disco_version.html\">the Ajax changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html---GETME\" title=\"disco_version.html\">disco_version.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\" title=\"Click picture\">live run<\/a>.<\/p>\n<p>Adding to yesterday&#8217;s <a title='User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial' href='#ucdjyteapiot'>User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial<\/a> &#8230;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ajax-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ucdjyteapiot'>Previous relevant <a target=_blank title='User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ordered-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.jpg\" title=\"User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial<\/p><\/div>\n<p>We think that whenever you &#8230;<\/p>\n<ul>\n<li>deprive many people of &#8220;order&#8221; in their lives &#8230; they&#8217;ll crave for (and maybe seek out) &#8220;order&#8221; &#8230; and when you &#8230;<\/li>\n<li>deprive many people of &#8220;randomosity&#8221; in their lives &#8230; they&#8217;ll crave for (and maybe seek out) &#8220;randomosity&#8221;<\/li>\n<\/ul>\n<p> &#8230; and so we see a mix of both in a web application as an advantage.  Today, for the first time we can remember, extending onto yesterday&#8217;s <a title='User Controlled Dynamic Javascript YouTube Embedded API Tutorial' href='#ucdjyteapit'>User Controlled Dynamic Javascript YouTube Embedded API Tutorial<\/a> functionality, definitely lacking some &#8220;order&#8221; we feel, we&#8217;ve allowed a &#8230;<\/p>\n<ul>\n<li>select &#8220;dropdown&#8221; element &#8230;<\/li>\n<li>multiple mode &#8230; have its &#8230;<\/li>\n<li>button press &#8220;finish of selections&#8221; event logic &#8230;<br \/>\n<code><br \/>\nfunction process(bsin) {<br \/>\n  var jj=0, mbo='', mlist='', mdelim='', vscnt=0;<br \/>\n  var sin=document.getElementById(bsin.id.replace('b','s'));<br \/>\n  for (var i=0; i&lt;sin.options.length; i++) {<br \/>\n    if (sin.options[i].selected) {<br \/>\n      if (sin.options[i].value != '') {<br \/>\n       jj++;<br \/>\n       vscnt++;<br \/>\n       mbo=sin.options[i].value.split('|')[0];<br \/>\n       mlist+=mdelim + sin.options[i].value.split('|')[0];<br \/>\n       mdelim=',';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  if (jj == 1) {<br \/>\n    location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=') + '&mustbeone=' + encodeURIComponent(mbo)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('\/&','\/?');<br \/>\n  } else if (jj &gt; 1) {<br \/>\n    if (oclickcnt == vscnt) { mlist=olist; }<br \/>\n    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('\/&','\/?');<br \/>\n  }<br \/>\n  oclickcnt=0;<br \/>\n  occ=[];<br \/>\n  olist='';<br \/>\n  odelim='';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>take into account the order the user clicked select element option elements &#8230;<br \/>\n<code><br \/>\n    var oclickcnt=0;<br \/>\n    var occ=[];<br \/>\n    var olist='';<br \/>\n    var odelim='';<br \/>\n<br \/>\n      function oclick(opto) {<br \/>\n       oclickcnt++;<br \/>\n       olist+=odelim + opto.id.split('|')[0];<br \/>\n       odelim=',';<br \/>\n      }<br \/>\n<\/code><br \/>\n &#8230; option element onclick event Javascript event logic&#8230; so long as &#8230;<\/li>\n<li>these two or more clicks\/touches on option elements (via their onclick event logics) (total in) number (to) the same (total) as the final number of options selected (ie. most &#8220;shift&#8221; key arrangement selections cannot be catered for in this logic, but totally &#8220;ctrl&#8221; (Windows) \/ &#8220;command&#8221; (macOS) key may work)<\/li>\n<\/ul>\n<p> &#8230; allowing for the user to control the video list, and its order.<\/p>\n<p>And on non-mobile platforms, we allow for a natural &#8220;sequencing&#8221; of play, once the first video is played and unmuted.  That way, on non-mobile, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html--GETME\" title=\"disco_version.html\">your changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html--GETME\" title=\"disco_version.html\">disco_version.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\" title=\"Click picture\">live run<\/a> web application can act like a continuous (radio like) &#8220;stream&#8221; of music.  Even so, on non-mobile, a user can &#8220;pause&#8221; a video, and start another via their own user actions, and the &#8220;stream&#8221; sequencing will change to fit in with the changed arrangements.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-ordered-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ucdjyteapit'>Previous relevant <a target=_blank title='User Controlled Dynamic Javascript YouTube Embedded API Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-tutorial\/'>User Controlled Dynamic Javascript YouTube Embedded API Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"User Controlled Dynamic Javascript YouTube Embedded API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.gif\" title=\"User Controlled Dynamic Javascript YouTube Embedded API Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">User Controlled Dynamic Javascript YouTube Embedded API Tutorial<\/p><\/div>\n<p>The recent <a title='Dynamic Javascript and the YouTube Embedded API Tutorial' href='#djyteapit'>Dynamic Javascript and the YouTube Embedded API Tutorial<\/a> showed the great <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube IFrame Player API<\/a> in action, including <font size=1>&#8230; and this dovetails well into today&#8217;s work &#8230;<\/font> no advertisements.<\/p>\n<p>A lot of us will know how great <a target=_blank href='\/\/youtube.com' title='YouTube'>YouTube<\/a> playlists are.  Today, we offer a(n example of) &#8230;<\/p>\n<ul>\n<li>an up to 9 &#8220;Disco Version&#8221; random array of <a target=_blank href='\/\/youtube.com' title='YouTube'>YouTube<\/a> videos that can be played ina session &#8230;<\/li>\n<li>from a possible array of 24 table cell slots (10-24 not shown, but &#8220;duration&#8221;able behind the scenes) &#8230;<\/li>\n<li>the 15 not randomly picked available to the user in a dropdown selection they can, optionally &#8230;\n<ol>\n<li>pick one from,click a &#8220;Shuffle&#8221; button, and a randomized list of 8 others is headedby your selected video &#8230; or &#8230;<\/li>\n<li>pick more than one and the first (up to 9) forms your ordered selection of playable videos<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; and the progress today leaves you controlling when to play the videos, yourself, clicking <a target=_blank href='\/\/youtube.com' title='YouTube'>YouTube<\/a> play buttons to make that happen.<\/p>\n<p>Enjoy the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html-GETME\" title=\"disco_version.html-GETME\">&#8220;how we got there&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html-GETME\" title=\"disco_version.html-GETME\">disco_version.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/disco_version.html\" title=\"Click picture\">upbeat disco selection live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/user-controlled-dynamic-javascript-youtube-embedded-api-tutorial\/'>\"User Controlled Dynamic Javascript YouTube Embedded API Tutorial<\/a>.<\/p-->\n<hr>\n<p id='djyteapit'>Previous relevant <a target=_blank title='Dynamic Javascript and the YouTube Embedded API Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-and-the-youtube-embedded-api-tutorial\/'>Dynamic Javascript and the YouTube Embedded API Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dynamic Javascript and the YouTube Embedded API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/msgtw.jpg\" title=\"Dynamic Javascript and the YouTube Embedded API Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dynamic Javascript and the YouTube Embedded API Tutorial<\/p><\/div>\n<p>Webpages without Javascript are generally pretty static and boring.  Javascript is that dynamic client addition to webpage functionality, but perhaps you only think of it as that statically written part of the webpage unable to be reloaded into effect after that initial webpage load.  Well, that is not taking into account Javascript such as &#8230;<\/p>\n<p><code><br \/>\n&lt;script&gt;<br \/>\n      var tag = document.<a target=_blank title='Javascript createElement method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp'>createElement<\/a>('script');<br \/>\n      tag.src = \"https:\/\/www.youtube.com\/iframe_api\";<br \/>\n      var firstScriptTag = document.getElementsByTagName('script')[0];<br \/>\n      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; taken from the excellent <a target=_blank title='YouTube IFrame Player API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube IFrame Player API<\/a> we really like to use around here to embed and control <a target=_blank title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> videos embedded into an HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element.<\/p>\n<p>In today&#8217;s small extension of that we load nine such HTML iframe embedded YouTube videos into a 3&#215;3 grid.  We resisted the previous <a target=_blank title='External Javascript Genericity Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-follow-up-tutorial\/'>Brady Bunch usage<\/a> of such an arrangement (perhaps you&#8217;ll be sad to hear?!) in favour of showing you a &#8220;collage&#8221; of video snippets from one of my favourite films ever, <a target=_blank title='Mr Smith Goes to Washington' href='https:\/\/en.wikipedia.org\/wiki\/Mr._Smith_Goes_to_Washington'>Mr Smith Goes to Washington<\/a>.<\/p>\n<p>We hope the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html_GETME\" title=\"dynamic_js.html\">dynamic_js.html<\/a>&#8216;s code will be food for thought, that you can test for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dynamic_js.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d37921' onclick='var dv=document.getElementById(\"d37921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37921' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47460' onclick='var dv=document.getElementById(\"d47460\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/music\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47460' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47470' onclick='var dv=document.getElementById(\"d47470\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/order\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47470' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47479' onclick='var dv=document.getElementById(\"d47479\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47479' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50450' onclick='var dv=document.getElementById(\"d50450\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50450' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50459' onclick='var dv=document.getElementById(\"d50459\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localStorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50459' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50483' onclick='var dv=document.getElementById(\"d50483\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onerror\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50483' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50490' onclick='var dv=document.getElementById(\"d50490\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-inspector\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50490' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50497' onclick='var dv=document.getElementById(\"d50497\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericity\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50497' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we are genericizing (and thereby personalising) on top of the work of The Wrecking Crew Dynamic Javascript YouTube Embedded API Web Inspector Tutorial the recently &#8220;made over&#8221; &#8220;The Wrecking Crew&#8221; and &#8220;Disco&#8221; YouTube IFrame Player API web applications, which &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-wrecking-crew-dynamic-javascript-youtube-embedded-api-peer-genericity-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,88,91,3441,3437,513,3436,576,587,626,630,652,2415,795,1922,3440,919,3439,997,1083,1175,3435,1319,1369,2099,1431,1493,2017],"class_list":["post-50497","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-api","tag-apple","tag-genericity","tag-glen-campbell","tag-google","tag-hal-blaine","tag-html","tag-iframe","tag-ios","tag-ipad","tag-javascript","tag-localstorage","tag-mobile","tag-onerror","tag-peer","tag-personalization","tag-phil-spector","tag-programming","tag-safari","tag-sound","tag-the-wrecking-crew","tag-tutorial","tag-video","tag-web-inspector","tag-wikipedia","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50497"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=50497"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50497\/revisions"}],"predecessor-version":[{"id":50509,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50497\/revisions\/50509"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}