{"id":70031,"date":"2025-10-05T03:01:00","date_gmt":"2025-10-04T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=70031"},"modified":"2025-10-05T07:24:28","modified_gmt":"2025-10-04T21:24:28","slug":"making-of-youtube-api-caller-subsequent-post-winding-up-for-now-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-youtube-api-caller-subsequent-post-winding-up-for-now-tutorial\/","title":{"rendered":"Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/pof_a_to_details.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/a_to_details.gif\" title=\"Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial<\/p><\/div>\n<p>Regarding yesterday&#8217;s <a title='YouTube API Caller Subsequent Post Winding Up For Now Tutorial' href='#ytapicspwufnt'>YouTube API Caller Subsequent Post Winding Up For Now Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nYes, now clicks on it&#8217;s &#8220;conjoin&#8221; links cause a contextually helping and relevant thumbnail image to appear adjacent to that relevant &#8220;a&#8221; element, and now navigates to the bigger image and comes back to show that thumbnail, whereas, earlier yesterday, the webpage just navigated down to the big image, as updated, only.\n<\/p><\/blockquote>\n<p>Now, we could have coded within the individual relevant blog posting for this new idea, but we got thinking that this arrangement we may use again, and that &#8230;<\/p>\n<ul>\n<li>we could code header.php for a setTimeout() called new Javascript function to recognize and act on the scenario above &#8230; but then we preferred &#8230;<\/li>\n<li>coding header.php to call a new external Javascript we&#8217;ve written for this, and that way, perhaps, be useful for scenarios outside the scope of this WordPress blog<\/li>\n<\/ul>\n<p>All a bit of overkill?!  Well, perhaps, but the learning is in the doing, and it is modularization at play, which can&#8217;t be a totally negative thing, in our view.  Besides that, we like to learn CSS better by trying to make what we want to happen, happen, regarding webpage usage.   These &#8220;Making of&#8221; scenarios can be like &#8220;accelerated learning&#8221; for us, because there is a concrete aim with the work, and can be achieved in a short time.<\/p>\n<p>To get to this new external Javascript we wrote <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/pof_a_to_details.html_GETME\" rel=\"noopener\">this new &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/pof_a_to_details.html\" rel=\"noopener\">web application<\/a> you can try for yourself below &#8230;<\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/pof_a_to_details.html\" style=\"background-color:white;zoom:0.4;width:100%;height:1900px;\"><\/iframe><\/p>\n<p> &#8230; proving the logic in isolation.  Please do not think getting this represents the end of testing, because this <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/a_to_details_re_img.js' rel=\"noopener\">new external Javascript a_to_details_re_img.js<\/a> tool out of this, needs to work within environments with many and varied &#8220;a&#8221; link data arrangements, and separate testing needs to be done in this phase with the Javascript as your more generic tool.<\/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\/making-of-youtube-api-caller-subsequent-post-winding-up-for-now-tutorial\/' rel=\"noopener\">Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicspwufnt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Subsequent Post Winding Up For Now Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-subsequent-post-winding-up-for-now-tutorial\/' rel=\"noopener\">YouTube API Caller Subsequent Post Winding Up For Now Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Subsequent Post Winding Up For Now Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/conjoining_threads.jpg\" title=\"YouTube API Caller Subsequent Post Winding Up For Now Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Subsequent Post Winding Up For Now Tutorial<\/p><\/div>\n<p>Today, we&#8217;re <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgisagain').src='\/HTMLCSS\/luna_backagain-1.jpeg'; document.getElementById('myimgisagain').style.visibility='visible';  document.getElementById('myimgisagain').scrollIntoView();\">conjoining<\/a> &#8230; yes, <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgisagain').src='\/HTMLCSS\/luna_backagain-2.jpeg'; document.getElementById('myimgisagain').style.visibility='visible';  document.getElementById('myimgisagain').scrollIntoView();\">conjoining<\/a> &#8230; two inhouse blog posting threads, those being &#8230;<\/p>\n<ul>\n<li>the recent <a title='YouTube API Caller Post Winding Up For Now Tutorial' href='#ytapicpwufnt'>YouTube API Caller Post Winding Up For Now Tutorial<\/a> <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgisagain').src='\/HTMLCSS\/luna_backagain-3.jpeg'; document.getElementById('myimgisagain').style.visibility='visible';  document.getElementById('myimgisagain').scrollIntoView();\">conjoined<\/a> &#8230; yes, <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgisagain').src='\/HTMLCSS\/luna_backagain-4.jpeg'; document.getElementById('myimgisagain').style.visibility='visible';  document.getElementById('myimgisagain').scrollIntoView();\">conjoined<\/a> &#8230; to &#8230;<\/li>\n<li><a target=\"_blank\" title='YouTube Video List of Play Supervisor Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-list-of-play-supervisor-tutorial\/' rel=\"noopener\">YouTube Video List of Play Supervisor Tutorial<\/a> from January earlier this year<\/li>\n<\/ul>\n<p>We think the former is a more savvy approach to <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> video &#8220;Radio Play&#8221; rather than the latter because the latter just works with crude <i>setTimeout()<\/i> delays based on the video being played straight through with no backtracking or non-video-play delays &#8230; and not continuous regarding mobile platforms.<\/p>\n<p>However, we think the latter has it&#8217;s &#8220;action packed&#8221; merits regarding it&#8217;s <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts' rel=\"noopener\">reveal<\/a> elements that add a bit of razzamatazz, and so we are <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgisagain').src='\/HTMLCSS\/luna_backagain-5.jpeg'; document.getElementById('myimgisagain').style.visibility='visible';  document.getElementById('myimgisagain').scrollIntoView();\">conjoining<\/a> &#8230; yes, <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgisagain').src='\/HTMLCSS\/luna_backagain-6.jpeg'; document.getElementById('myimgisagain').style.visibility='visible';  document.getElementById('myimgisagain').scrollIntoView();\">conjoining<\/a> &#8230; two inhouse blog posting thread web applications regarding &#8230;<\/p>\n<ol>\n<li>abilities to call each other off emoji button clicks &#8230;<\/li>\n<li>abilities to save to each other&#8217;s &#8220;Save&#8221; functionalities so that a potential &#8220;Recall&#8221; of a playlist becomes available to each of the web applications, separately, in that web application&#8217;s modus operandi regarding YouTube API video &#8220;Radio Play&#8221;<\/li>\n<\/ol>\n<p>That should leave you free to try, either &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Media Gallery<\/a> web application &#8230; and\/or &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html---------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html---------GETME\" rel=\"noopener\">esp_ornot_esp.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\">Reveal Style YouTube Video &#8220;Radio Play&#8221;<\/a> web application<\/li>\n<\/ul>\n<p> &#8230; as different takes on our inhouse ways regarding <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> video &#8220;Radio Play&#8221;, which we hope you enjoy!<\/p>\n<p><img id=myimgisagain title=Luna src='\/HTMLCSS\/luna_upstairs.jpg' style='visibility:hidden;'><\/img><\/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\/youtube-api-caller-subsequent-post-winding-up-for-now-tutorial\/' rel=\"noopener\">YouTube API Caller Subsequent Post Winding Up For Now Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicpwufnt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Post Winding Up For Now Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-post-winding-up-for-now-tutorial\/' rel=\"noopener\">YouTube API Caller Post Winding Up For Now Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Post Winding Up For Now Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/compilation_better.gif\" title=\"YouTube API Caller Post Winding Up For Now Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Post Winding Up For Now Tutorial<\/p><\/div>\n<p>You knew we were &#8220;winding <sup>you<\/sup> up&#8221; when we presented <a title='YouTube API Caller Winding Up For Now Tutorial' href='#ytapicwufnt'>YouTube API Caller Winding Up For Now Tutorial<\/a>, didn&#8217;t you?!  It can&#8217;t be the total end of the story, right?!<\/p>\n<p>Yes, we found both &#8230;<\/p>\n<ul>\n<li>issues &#8230; and &#8230;<\/li>\n<li>improvements to make<\/li>\n<\/ul>\n<p> &#8230; regarding that &#8220;compilation mode&#8221;  &#x1F4FB; &#8220;emoji button&#8221; double click within bottom buttons mode of <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video Radio Play modus operandi.  Clearly, Luna &#8230;<\/p>\n<p><img tabindex=0 oncontextmenu=imgedit(event); ontouchend=imgedit(event); id=myimgis title=Luna src='\/HTMLCSS\/luna_upstairs.jpg'><\/img><\/p>\n<p> &#8230; knew the <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgis').src='\/HTMLCSS\/luna_upstairs.jpeg'; document.getElementById('myimgis').scrollIntoView();\">jig was up<\/a>!<\/p>\n<p>Under &#8220;issues&#8221; we&#8217;d say it boiled down to URLs capable of going past the <a title=\"Errors\" href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_HTTP_status_codes#4xx_Client_errors\" target=\"_blank\" rel=\"noopener\">error 414<\/a> length limits.  And what of &#8220;improvements to make&#8221;?  Well, <font color=blue>the most interesting one<\/font>, for us, was to &#8230;<\/p>\n<p><code><br \/>\n           if (!independent) {<br \/>\n           prefix='isradio=YES&completionmatters=y' + argshuffle + '&';<br \/>\n           if (eval('' + dsa.length) &gt; 1 && eval('' + wsa.length) &gt; 1) {<br \/>\n             var anarr=ytlist.split(',');<br \/>\n             <font color=blue>anarr.sort();<\/font><br \/>\n             ytlist='' + anarr[0];<br \/>\n             for (var inb=1; inb&lt;anarr.length; inb++) {<br \/>\n               ytlist+=',' + anarr[inb];<br \/>\n             }<br \/>\n           }<br \/>\n           }<br \/>\n<\/code><\/p>\n<p> &#8230; aid with the randomization of YouTube video songs (in amongst the three categorizations we&#8217;ve got going out of Disco and The Wrecking Crew and Yacht Rock) &#8230;<\/p>\n<ul>\n<li>collected as three separate &#8220;lump components&#8221; to the YouTube video list (before this new sorting idea) &#8230; but, of course &#8230;<\/li>\n<li>sorting via YouTube video ID <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgis').src='\/HTMLCSS\/luna_car.jpg'; document.getElementById('myimgis').scrollIntoView();\">brings back the randomness to the order<\/a> &#8230; and fits in with &#8230;<\/li>\n<li>the default &#8220;shuffle on&#8221; setting for this &#8220;compilation play&#8221; Radio Play<\/li>\n<\/ul>\n<p> &#8230; thinking.<\/p>\n<p>And so, <a title=? style=cursor:pointer;text-decoration:underline; onclick=\"document.getElementById('myimgis').src='\/HTMLCSS\/luna_vehicle.jpg'; document.getElementById('myimgis').scrollIntoView();\">feel ever so free<\/a> to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html---------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html---------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Media Gallery<\/a> web application.<\/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\/youtube-api-caller-post-winding-up-for-now-tutorial\/' rel=\"noopener\">YouTube API Caller Post Winding Up For Now Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicwufnt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Winding Up For Now Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-winding-up-for-now-tutorial\/' rel=\"noopener\">YouTube API Caller Winding Up For Now Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Winding Up For Now Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/opera_better.gif\" title=\"YouTube API Caller Winding Up For Now Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Winding Up For Now Tutorial<\/p><\/div>\n<p>We&#8217;re calling it quits after today regarding the <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> media aspects to the Media Gallery web application yesterday&#8217;s <a title='YouTube API Caller Order and Completion Tutorial' href='#ytapicoct'>YouTube API Caller Order and Completion Tutorial<\/a>.<\/p>\n<p>We&#8217;ll be back, because we always find things, and come across, via others mostly (thanks), new ways to do things, but what are the things achieved for the first<sup>ish<\/sup> time, for us, in this project?  We think &#8230;<\/p>\n<ul>\n<li>Radio Play (better than a previous incarnation) of <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> videos on mobile or non-mobile (and for the first time we can remember there were days when <i>mobile<\/i> was out ahead of <i>non-mobile<\/i> for it all working, curiously)<\/li>\n<li>Bluetooth has &#8220;hidden powers&#8221; &#8230; sorry to be this vague, but you need to test this <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> logics going into and out of Bluetooth<\/li>\n<li>continuous YouTube media play, this way, at the end of the day, needs your website to not be struggling, the logic dependent on setTimeout logics (which have to be continually called) &#8230; ie. you need to maintain &#8220;connection&#8221;<\/li>\n<li>how good is <a target=\"_blank\" title='Lorem Picsum' href='https:\/\/picsum.photos\/' rel=\"noopener\">Lorem Picsum<\/a>, thanks, regarding being a great free image repository &#8230; old news but good news<\/li>\n<\/ul>\n<p>And so, today, we fixed up an issue that appeared to us using the macOS Opera browser.  The bottom buttons were missing, and the fix will surprise some.  Not <font color=blue>fancy pants thinking<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var isOpera = (navigator.userAgent.match(\/Opera|OPR\\\/\/) ? true : false);<\/font><br \/>\n  var agentruew=eval('' + document.documentElement.clientWidth);<br \/>\n  var agentrueh=eval('' + document.documentElement.clientHeight);<br \/>\n  var amax=Math.max(agentruew,agentrueh);<br \/>\n  var amin=Math.min(agentruew,agentrueh);<br \/>\n  amin-=60;<br \/>\n  \/\/<font color=blue>if (isOpera) {<\/font><br \/>\n  \/\/<font color=blue>  amin-=80;<\/font><br \/>\n  \/\/<font color=blue>}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; just &#8220;dumbing it down&#8221; if you will.  Trying a simple fix, like &#8230;<\/p>\n<ul>\n<li>removing two of the left hand cell <i>|<\/i> characters fixed the issue <font size=1>(highlighting the CSS subtleties of <i>visibility:hidden;<\/i> (still retaining the whitespace) versus <i>display:none;<\/i> (no retension of whitespace) approaches to hiding elements, in our case the &#8220;breadcrumb navigation&#8221; first approach we&#8217;re leaving in, in case we return to the idea under a <i>visibility:hidden;<\/i> paradigm)<\/font><\/li>\n<li>and while we were there removed the grating underlining of these<\/li>\n<\/ul>\n<p>Doh!<\/p>\n<p>And so, feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html--------------------GETME\" rel=\"noopener\">the mildly tweaked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html--------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Media Gallery<\/a> web application.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Yes, overthinking things can be detrimental.  It is good to think complex issues through, away from any struggle you&#8217;ve been having for hours, when you only expected that issue to take a few minutes.<\/p>\n<p>But &#8230; even above &#8230; we would not have arrived at the &#8220;<i>|<\/i> character removal&#8221; fix quickly, if we had not gone though the other &#8220;overthinking part tests&#8221; to ascertain what was possible, if you get my drift.  How you spend development hours, and how efficient you are are variables, and will change from day to day.  There might be days you are best not touching the keyboard <font size=1>(and ditch the mobile too)<\/font>.<\/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\/new-youtube-api-caller-order-and-completion-tutorial\/' rel=\"noopener\">YouTube API Caller Order and Completion Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicoct'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Order and Completion Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-order-and-completion-tutorial\/' rel=\"noopener\">YouTube API Caller Order and Completion Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Order and Completion Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/order_and_completion.gif\" title=\"YouTube API Caller Order and Completion Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Order and Completion Tutorial<\/p><\/div>\n<p>Up until yesterday&#8217;s <a title='YouTube API Caller Breadcrumb Navigation Tutorial' href='#ytapicbnt'>YouTube API Caller Breadcrumb Navigation Tutorial<\/a> a lot of the theme to &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video presentation tended towards &#8220;the random&#8221; &#8230; fun for programmers and gamers alike (actually pretty essential for a lot of the work of the latter) &#8230; but eventuality for human mental health, or for episodic video media data, you&#8217;ll want a way to introduce &#8230;<\/li>\n<li>&#8220;order&#8221; &#8230; as designated by the user in <font color=blue>an amended<\/font> prompt window &#8230;<br \/>\n<blockquote><p>\nEnter YouTube 11 character code video (comma separated) or audio stream only of video (semicolon separated) list to Radio Play (and add ! to start in shuffle mode<font color=blue> and\/or # to honour the order you enter and\/or &#038; to ensure whole list passes through<\/font>) &#8230; or a YouTube Search String basis to create a playlist via a Radio&#128251;? button to activate, later.\n<\/p><\/blockquote>\n<p> &#8230; and\/or &#8230;<\/li>\n<p>talked about today and in <\/p>\n<li>&#8220;completion&#8221; &#8230; as designated by the user in same prompt window &#8230; ie. hang around for whole list to be scanned for video durations, and passed on<\/li>\n<\/ul>\n<p>And further to the work of the day before yesterday&#8217;s <a title='YouTube API Caller Replaced Video Entry Tutorial' href='#ytapicrvet'>YouTube API Caller Replaced Video Entry Tutorial<\/a> we wanted to extend that logic introduced there in two ways &#8230;<\/p>\n<ul>\n<li>allow for a comma separated list of 11 character YouTube video IDs be accepted &#8230;<\/li>\n<li>have entries be immediately processed should the entry (or comma separated entries) be made in the currently active YouTube playing video&#8217;s associated textbox &#8230; via &#8230;<br \/>\n<code><br \/>\n  var geleven=-1;<br \/>\n  <br \/>\n  function onoff() {<br \/>\n    var nnum=0;<br \/>\n    if (geleven &gt;= 0) {<br \/>\n   backtolist=['c' + eval('' + geleven)];<br \/>\n      document.getElementById('c' + geleven).checked=false;<br \/>\n   while (document.getElementById('i' + nnum)) {<br \/>\n     if (('' + nnum) != ('' + geleven)) {<br \/>\n      if (document.getElementById('c' + nnum).checked) {<br \/>\n        backtolist.push('c' + eval('' + nnum));<br \/>\n      }<br \/>\n      document.getElementById('c' + nnum).checked=false;<br \/>\n     }<br \/>\n     nnum++;<br \/>\n   }<br \/>\n      \/\/document.getElementById('c' + geleven).checked=true;<br \/>\n      geleven=-geleven;<br \/>\n      \/\/checkval(document.getElementById('i' + Math.abs(geleven)));<br \/>\n      setTimeout(function(){  document.getElementById('c0').checked=false; document.getElementById('c' + Math.abs(geleven)).checked=true; }, 2400);<br \/>\n      setTimeout(function(){  for (var ik=0; ik&lt;backtolist.length; ik++) { document.getElementById(backtolist[ik]).checked=true;  } backtolist=[];  }, 6500);<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; into the mix in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a> &#8230; used by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Media Gallery<\/a> web application.<\/li>\n<\/ul>\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\/youtube-api-caller-order-and-completion-tutorial\/' rel=\"noopener\">YouTube API Caller Order and Completion Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicbnt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Breadcrumb Navigation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-breadcrumb-navigation-tutorial\/' rel=\"noopener\">YouTube API Caller Breadcrumb Navigation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Breadcrumb Navigation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/breadcrumb_navigation.jpg\" title=\"YouTube API Caller Breadcrumb Navigation Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Breadcrumb Navigation Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='YouTube API Caller Replaced Video Entry Tutorial' href='#ytapicrvet'>YouTube API Caller Replaced Video Entry Tutorial<\/a> we wanted to offer the &#8220;Radio Play&#8221; users of our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Media Gallery<\/a> web application the chance to use <a target=\"_blank\" title='Breadcrumb navigation information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Breadcrumb_navigation' rel=\"noopener\">Breadcrumb<\/a> style navigation aids regarding &#8230;<\/p>\n<ul>\n<li>&lt;&lt; &#8230; navigate to first YouTube video of interest in the playlist<\/li>\n<li>&lt; &#8230; navigate to previous YouTube video of interest in the playlist<\/li>\n<li>&gt; &#8230; navigate to next YouTube video of interest in the playlist<\/li>\n<li>&gt;&gt; &#8230; navigate to last YouTube video of interest in the playlist<\/li>\n<\/ul>\n<p> &#8230; referencing this <i>onclick<\/i> Javascript logic &#8230;<\/p>\n<p><code><br \/>\nfunction knaviga(evt) {<br \/>\n        var oso=evt.target;<br \/>\n        evt.stopPropagation();<br \/>\n        if (eval('' + backtolist.length) &gt; 0) {<br \/>\n         for (var iik=0; iik&lt;backtolist.length; iik++) {<br \/>\n           document.getElementById('' + backtolist[iik]).checked=true;<br \/>\n         }<br \/>\n        }<br \/>\n        backtolist=[];<br \/>\n        var keepg=true, ik=0, lva='0';<br \/>\n        prevwoin='0';<br \/>\n        woinnext='0';<br \/>\n        woinlast='0.0';<br \/>\n        firstwoin='0.0';<br \/>\n        \/\/xnextwoin='999';<br \/>\n        var knum=0;<br \/>\n        while (document.getElementById('xx' + knum)) {<br \/>\n        if (('' + document.getElementById('xx' + knum).outerHTML).indexOf('green') != -1) {<br \/>\n          prevwoin='' + lva;<br \/>\n          if (1 == 1 || eval('' + knum) &gt; eval('' + xnextwoin)) { xnextwoin='' + knum; }<br \/>\n          lva='' + knum;<br \/>\n          woinnext=woinnext.replace('.0','');<br \/>\n        }<br \/>\n        if (document.getElementById('c' + knum)) {<br \/>\n          if (document.getElementById('c' + knum).checked) {<br \/>\n             if (firstwoin.indexOf('.0') != -1) {<br \/>\n               firstwoin='' + knum;<br \/>\n               woinlast='' + knum;<br \/>\n             } else {<br \/>\n               woinlast='' + knum;<br \/>\n             }<br \/>\n             if (eval('' + knum) == eval('' + xnextwoin)) {<br \/>\n               woinnext='' + knum + '';<br \/>\n             } else if (eval('' + knum) &gt; eval('' + xnextwoin) && woinnext.indexOf('.0') == -1) {<br \/>\n               woinnext='' + knum + '.0';<br \/>\n             }<br \/>\n             backtolist.push('c' + knum);<br \/>\n          }<br \/>\n        }<br \/>\n        knum++;<br \/>\n        }<br \/>\n        knum=0;<br \/>\n        while (document.getElementById('c' + knum)) {<br \/>\n          if (eval('' + knum) &lt; eval('' + xnextwoin)) { prevwoin='' + knum;  }<br \/>\n          knum++;<br \/>\n        }<br \/>\n        var ourthisval='' + oso.id;<br \/>\n        \/\/top.document.title='' + xnextwoin + ':' + document.getElementById('xx0').outerHTML.split('&gt;')[0] + ':' + ('' + new Date());<br \/>\n        if (keepg && window.parent) {<br \/>\n        if (top.document.getElementById('navig')) {<br \/>\n          if (ourthisval.trim() != '') {<br \/>\n            if (ourthisval.trim() == 'sback') {<br \/>\n              if (document.getElementById('c' + xnextwoin)) {<br \/>\n              for (ik=0; ik&lt;knum; ik++) {<br \/>\n                if (('' + ik) != ('' + prevwoin) && document.getElementById('c' + ik)) {<br \/>\n                  document.getElementById('c' + ik).checked=false;<br \/>\n                }<br \/>\n              }<br \/>\n              setTimeout(function(){  for (var ik=0; ik&lt;backtolist.length; ik++) { document.getElementById(backtolist[ik]).checked=true;  } backtolist=[];  }, 3500);<br \/>\n              }<br \/>\n            } else if (ourthisval.trim() == 'snext') {<br \/>\n              if (document.getElementById('c' + xnextwoin)) {<br \/>\n              for (ik=0; ik&lt;knum; ik++) {<br \/>\n                if (('' + ik) != ('' + woinnext.split('.')[0]) && document.getElementById('c' + ik)) {<br \/>\n                  document.getElementById('c' + ik).checked=false;<br \/>\n                }<br \/>\n              }<br \/>\n              setTimeout(function(){  for (var ik=0; ik&lt;backtolist.length; ik++) { document.getElementById(backtolist[ik]).checked=true;  } backtolist=[];  }, 3500);<br \/>\n              }<br \/>\n     \/\/alert('bYES ' + nextwoin + parent.document.getElementById('navig').value);<br \/>\n            } else if (ourthisval.trim() == 'sfirst') {<br \/>\n              if (document.getElementById('c' + xnextwoin)) {<br \/>\n              for (ik=0; ik&lt;knum; ik++) {<br \/>\n                if (('' + ik) != ('' + firstwoin.split('.')[0]) && document.getElementById('c' + ik)) {<br \/>\n                  document.getElementById('c' + ik).checked=false;<br \/>\n                }<br \/>\n              }<br \/>\n              setTimeout(function(){  for (var ik=0; ik&lt;backtolist.length; ik++) { document.getElementById(backtolist[ik]).checked=true;  } backtolist=[];  }, 3500);<br \/>\n              }<br \/>\n            } else if (ourthisval.trim() == 'slast') {<br \/>\n              if (document.getElementById('c' + xnextwoin)) {<br \/>\n              for (ik=0; ik&lt;knum; ik++) {<br \/>\n                if (('' + ik) != ('' + woinlast.split('.')[0]) && document.getElementById('c' + ik)) {<br \/>\n                  document.getElementById('c' + ik).checked=false;<br \/>\n                }<br \/>\n              }<br \/>\n              setTimeout(function(){  for (var ik=0; ik&lt;backtolist.length; ik++) { document.getElementById(backtolist[ik]).checked=true;  } backtolist=[];  }, 3500);<br \/>\n              }<br \/>\n            }<br \/>\n            parent.document.getElementById('navig').value='';<br \/>\n          }<br \/>\n        }<br \/>\n        }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; along with the &#8220;<sup>single song obsessional<\/sup> looping&#8221; logic of a couple of days ago made toggle<sup>able<\/sup> (to better fit in with these new ideas, we felt), all in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> and establish a two day limit of availability regarding data URI public URL media links, enough time we figure for sharing and any collaboration (but will not translate well for any saved playlist arrangements involving any data URI user based entries and outside those two days, alas) in <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php----------------------GETME' title='signature_signature.php' rel=\"noopener\">our changed<\/a> PHP helper <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php----------------------GETME' title='signature_signature.php' rel=\"noopener\">signature_signature.php<\/a> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_POST['an_i_tidy']) || isset($_GET['an_i_tidy'])) {<br \/>\n    foreach (glob($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'tmp' . DIRECTORY_SEPARATOR . 'karaoke_i_bizzo_' . '*.*') as $dfilename) {<br \/>\n     $filemtime = filemtime($dfilename);<br \/>\n     if (time() - $filemtime >= 172800) {  \/\/ 86400 seconds in a day<br \/>\n        unlink($dfilename);<br \/>\n     }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; called by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/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\/youtube-api-caller-breadcrumb-navigation-tutorial\/' rel=\"noopener\">YouTube API Caller Breadcrumb Navigation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicrvet'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Replaced Video Entry Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-replaced-video-entry-tutorial\/' rel=\"noopener\">YouTube API Caller Replaced Video Entry Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Replaced Video Entry Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/replaced_ytid.jpg\" title=\"YouTube API Caller Replaced Video Entry Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Replaced Video Entry Tutorial<\/p><\/div>\n<p>In addition to the &#8230;<\/p>\n<ul>\n<li>user entry URL &#8230; and now &#8230;<\/li>\n<li>user entry data URI &#8230; optionally using local file browsing &#8230;<\/li>\n<\/ul>\n<p> &#8230; playlist amending tools available to users within yesterday&#8217;s <a title='YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial' href='#ytapicrpptduriphpt'>YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial<\/a> today we&#8217;ve added the more obvious &#8230;<\/p>\n<p><code><br \/>\nuser entry of different YouTube 11 character video ID<br \/>\n<\/code><\/p>\n<p> &#8230; into the mix in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a> &#8230; used by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Media Gallery<\/a> web application.<\/li>\n<\/ul>\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\/youtube-api-caller-replaced-video-entry-tutorial\/' rel=\"noopener\">YouTube API Caller Replaced Video Entry Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicrpptduriphpt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-radio-play-phase-two-data-uri-php-tutorial\/' rel=\"noopener\">YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/data_uri_phase_two.gif\" title=\"YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='YouTube API Caller Radio Play Obsession Looping Tutorial' href='#ytapicrpolt'>YouTube API Caller Radio Play Obsession Looping Tutorial<\/a>, and concerning &#8230;<\/p>\n<ul>\n<li>phase two data URI user media interactive textbox entries &#8230;<\/li>\n<li>we&#8217;d actually started down it&#8217;s road in our first pass of PHP work a couple of weeks ago &#8230; and we are really happy we &#8220;let that stew&#8221; because &#8230;<\/li>\n<li>returning to the work today we developed a much easier concept than &#8230;\n<ol>\n<li>give the data URI a nickname shortening that data URI and bring it into play at the appropriate moment &#8230; versus today&#8217;s much better &#8230;<\/li>\n<li>store the data as a media file on our server for a length of time (we haven&#8217;t organized yet)<\/li>\n<\/ol>\n<\/ul>\n<p>That way a &#8230;<\/li>\n<ol>\n<li>data URI is entered into a textbox by the user &#8230; and they can locally browse for this if they want &#8230;<\/li>\n<li>the onblur event logic immediately calls the PHP to create the temporary web server media file (stored in a public URL place) &#8230; so &#8230;<\/li>\n<li>into the textbox we map the public URL place media URL over the data URI<\/li>\n<\/ol>\n<p> &#8230; and avoid any &#8220;too long URL&#8221; errors as well as not needing to map between any nicknames with real data URI data &#8230; much easier!<\/p>\n<p>Why involve PHP?  The amounts of data regarding data URIs precludes a feasible <font size=1>(ie. we&#8217;re not saying it&#8217;s impossible)<\/font> clientside only approach.  We need to create data files and the serverside is the best place we can think of to do that in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php---------------------GETME' title='signature_signature.php' rel=\"noopener\">our changed<\/a> PHP helper <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.php---------------------GETME' title='signature_signature.php' rel=\"noopener\">signature_signature.php<\/a> helping<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application.<\/li>\n<\/ul>\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\/youtube-api-caller-radio-play-phase-two-data-uri-php-tutorial\/' rel=\"noopener\">YouTube API Caller Radio Play Phase Two Data URI PHP Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicrpolt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Radio Play Obsession Looping Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-radio-play-obsession-looping-tutorial\/' rel=\"noopener\">YouTube API Caller Radio Play Obsession Looping Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Radio Play Obsession Looping Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/right_click_idea.jpg\" title=\"YouTube API Caller Radio Play Obsession Looping Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Radio Play Obsession Looping Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='YouTube API Caller Phase Two Console Warning Tutorial' href='#ytapicptcwt'>YouTube API Caller Phase Two Console Warning Tutorial<\/a> outlined why &#8230;<\/p>\n<ul>\n<li>&#8220;<sup>single song obsessional<\/sup> looping&#8221; &#8230; sits uneasily with &#8230;<\/li>\n<li>&#8220;<sup>set of song videos<\/sup> looping&#8221; &#8230; in Radio Play mode of use<\/li>\n<\/ul>\n<p> &#8230; with our recent <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application.<\/p>\n<p>But they don&#8217;t have to be totally inalienable concepts, as we outlined &#8230;<\/p>\n<blockquote><p>\nwhere, now, if you are after some &#8220;<sup>single song obsessional<\/sup> looping&#8221; try unchecking all checkboxes except the one of your obsession <font size=1>&#8230; and good luck ending the itch!<\/font>\n<\/p><\/blockquote>\n<p>That remains true, but we wanted an easier way to allow for &#8220;<sup>single song obsessional<\/sup> looping&#8221; in Radio Play modes of use.  We wanted to hook into an unused event arrangement related to those textboxes to the right of the left hand side checkboxes.  We decided on &#8230;<\/p>\n<ul>\n<li>oncontextmenu &#8230; ie. right click &#8230; on non-mobile platforms &#8230; and &#8230;<\/li>\n<li>ontouchmove &#8230; on mobile platforms<\/li>\n<\/ul>\n<p> &#8230; <font color=blue>via<\/font> (at the grandchild level) &#8230;<\/p>\n<p><code><br \/>\n    for (var iipp=0; iipp&lt;=29; iipp++) {<br \/>\n     <font color=blue>if (('' + top.document.URL).indexOf('isradio=') != -1) {<br \/>\n     if (parent.document.getElementById('i' + iipp).outerHTML.indexOf(' oncontextmmenu=') == -1) {<br \/>\n        parent.document.getElementById('i' + iipp).oncontextmenu=function(event){ parent.obsessabout(event);  };<br \/>\n        parent.document.getElementById('i' + iipp).ontouchmove=function(event){ parent.obsessabout(event);  };<br \/>\n        if (istitles.indexOf(iipp) == -1) {<br \/>\n          istitles.push(iipp);<br \/>\n        }<br \/>\n        if (iipp == 0) {<br \/>\n        setTimeout(function(){<br \/>\n        for (var jipp=0; jipp&lt;istitles.length; jipp++) {<br \/>\n        if (('' + parent.document.getElementById('i' + jipp).title) == '') {<br \/>\n        parent.document.getElementById('i' + jipp).title+=' Right click or touch move to loop just this video';<br \/>\n        } else {<br \/>\n        parent.document.getElementById('i' + jipp).title+=' and right click or touch move to loop just this video';<br \/>\n        }<br \/>\n        }<br \/>\n        }, 8000);<br \/>\n        }<br \/>\n     }<br \/>\n     }<\/font><br \/>\n\/\/ rest of for loop code<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=purple>actioned<\/font> (at the child\/parent level) &#8230;<\/p>\n<p><code><br \/>\n<font color=purple>function obsessabout(evt) {<br \/>\n   evt.stopPropagation();<br \/>\n   var theonetokeep=('' + evt.target.id).replace('i','');<br \/>\n   var nnum=0;<br \/>\n   document.getElementById('c' + theonetokeep).checked=true;<br \/>\n   while (document.getElementById('i' + nnum)) {<br \/>\n     if (('' + nnum) != ('' + theonetokeep)) {<br \/>\n      document.getElementById('c' + nnum).checked=false;<br \/>\n     }<br \/>\n     nnum++;<br \/>\n   }<br \/>\n}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a><\/li>\n<\/ul>\n<p> &#8230; especially related to the grandparent level <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application&#8217;s &#8220;Radio Play&#8221; mode of use.<\/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\/youtube-api-caller-radio-play-obsession-looping-tutorial\/' rel=\"noopener\">YouTube API Caller Radio Play Obsession Looping Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicptcwt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Phase Two Console Warning Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-console-warning-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Console Warning Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Phase Two Console Warning Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/console_warning.gif\" title=\"YouTube API Caller Phase Two Console Warning Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Phase Two Console Warning Tutorial<\/p><\/div>\n<p>Continuing on from yesterday&#8217;s <a title='YouTube API Caller Phase Two Text Cursor Tutorial' href='#ytapicpttct'>YouTube API Caller Phase Two Text Cursor Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nWhat the dickens is &#8220;Console Warning&#8221;?\n<\/p><\/blockquote>\n<p>Well, it&#8217;s a new good friend to us using the <a target=\"_blank\" title='Google Chrome' href='https:\/\/www.google.com\/chrome\/' rel=\"noopener\">Google Chrome<\/a> web browser (but other web browsers can work it too) <a target=\"_blank\" title='Google Chrome Developer Tools' href='https:\/\/developer.chrome.com\/docs\/devtools\/' rel=\"noopener\">Web Inspector<\/a>&#8216;s division of &#8220;issue or not&#8221; reporting you can get your web applications to do via Javascript to debug or inform as the web application executes.  We have found &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='console.warn information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/console\/warn_static' rel=\"noopener\">console.warn<\/a>('Any text of your interest, not just the technical sense of a warning error in http land.');<br \/>\n<\/code><\/p>\n<p> &#8230; as a useful way to sort the chaff from the rest trying to analyse issues.  <i>Tissues for issues<\/i>?!  Most web application get issues from the time you give birth and well into their adolescent years to when they get deprecated and sent to &#8220;the scrapheap of the online wooooorrrrrllllddddd&#8221; &#8230; shipped off to Mars we&#8217;re predicting next &#8230; oops &#8230; too many plays of <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=qfZVu0alU0I' rel=\"noopener\">this<\/a> we&#8217;re suspecting &#8230; although &#8230;<\/p>\n<p><img src='\/HTMLCSS\/no_eve_of_destruction.jpg' style='width:100%;'><\/img><\/p>\n<p> &#8230; it might have passed the notice of some?!<\/p>\n<p>Anyway, the day of &#8220;shoring up&#8221; our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application&#8217;s &#8220;Radio Play&#8221; mode of use started with an innocent question &#8230;<\/p>\n<blockquote><p>\nWhy is the web application &#8220;less flaky&#8221; just after we clear the <a target=\"_blank\" title='Cache information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Cache_(computing)' rel=\"noopener\"><sup>web browser<\/sup> cache<\/a> for an hour?\n<\/p><\/blockquote>\n<p>Our first suspect we just launched into without proof, but <font color=purple>really conditionally<\/font> <font color=blue>did much less<\/font> <sup>of<\/sup> &#8230;<\/p>\n<p><code><br \/>\n                <font color=purple>if (('' + parent.document.URL).replace(\/\\%23http$\/g,'#http').replace(\/\\#http$\/g,'') == ('' + parent.document.URL)) {  \/\/ ie. \"Radio Play\"<\/font><br \/>\n                if (('' + window.sessionStorage.getItem('loop_' + vid.split(',')[0])).replace(\/^undefined\/g,'').replace(\/^null\/g,'').trim() != '') {<br \/>\n                   window.sessionStorage.removeItem('loop_' + vid.split(',')[0]);<br \/>\n                }<br \/>\n                <font color=blue>window.sessionStorage.setItem('loop_' + vid.split(',')[0], 'y');<\/font><br \/>\n                <font color=purple>}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; window.<a target=\"_blank\" title='sessionStorage information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/sessionStorage' rel=\"noopener\">sessionStorage<\/a> means by which to encourage the &#8220;<sup>single song obsessional<\/sup> looping&#8221; talked about below.<\/p>\n<p>Our second suspect, that the thinking above leads to, was the &#8220;encouragement of <sup>single song obsessional<\/sup> looping&#8221; (from audio stream of video days <font size=1>early on in this project, even<\/font>) as distinct from &#8230;<\/p>\n<p><code><br \/>\n\"encouragement of <sup>set of song videos<\/sup> looping\"<br \/>\n<\/code><\/p>\n<p> &#8230; this latter mode of use asking in our &#8220;three tier hierarchical web application environment&#8221; that &#8230;<\/p>\n<blockquote><p>\nThe grandchild must be set free &#8230; aka <a target=\"_blank\" title=\"?\" href='https:\/\/www.google.com\/search?q=home+alone+youtube&#038;sca_esv=d97cd7beb237429d&#038;rlz=1C5OZZY_en&#038;sxsrf=AE3TifOc91vaM_NGH-LOuJV-vaVQ70cIMg%3A1757130852212&#038;ei=ZLC7aPfdDLzh2roPs77UuQs&#038;ved=0ahUKEwj3n5TCnsOPAxW8sFYBHTMfNbcQ4dUDCBA&#038;uact=5&#038;oq=home+alone+youtube&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiEmhvbWUgYWxvbmUgeW91dHViZTILEAAYgAQYkQIYigUyBRAAGIAEMgYQABgWGB4yBhAAGBYYHjIGEAAYFhgeMgYQABgWGB4yBhAAGBYYHjIGEAAYFhgeMgYQABgWGB4yBhAAGBYYHkiIHVDDAVifG3ABeAGQAQCYAbQBoAHcCqoBAzAuOLgBA8gBAPgBAZgCCaAClwvCAgoQABiwAxjWBBhHwgINEAAYgAQYsAMYQxiKBcICDhAAGLADGOQCGNYE2AEBwgITEC4YgAQYsAMYQxjIAxiKBdgBAcICEBAAGIAEGLEDGEMYgwEYigXCAg0QLhiABBixAxhDGIoFwgIQEC4YgAQYsQMYQxiDARiKBcICChAuGIAEGEMYigXCAgoQABiABBhDGIoFwgIKEAAYgAQYFBiHApgDAIgGAZAGE7oGBggBEAEYCZIHAzEuOKAH1jyyBwMwLji4B4kLwgcHMC4xLjcuMcgHLg&#038;sclient=gws-wiz-serp#fpstate=ive&#038;vld=cid:c0bae1be,vid:FONdncajPfg,st:0' rel=\"noopener\">Home Alone<\/a> &#8230; to work alone and unsupported.\n<\/p><\/blockquote>\n<p> &#8230; an idea which is anathema to other ways we&#8217;ve worked our inhouse <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> calling work.<\/p>\n<p>In this new wooooorrrrllllddd calls to YouTube API&#8217;s &#8230;<\/p>\n<p><code><br \/>\n player.stopVideo();   \/\/\/ or player.pauseVideo() for that matter<br \/>\n<\/code><\/p>\n<p> &#8230; are definite nonos, as are calls from the &#8220;middle child&#8221;.  But the code is full of such calls, and other uses of <i>player.stopVideo()<\/i> suit other modes of use?  Right?!<\/p>\n<blockquote><p>\nYou betcha!\n<\/p><\/blockquote>\n<p>We need to debug which codelines containing <i>player.stopVideo()<\/i> or <i>&#8220;middle child&#8221;<\/i> calls to narrow down the relevant one or two making the web application &#8220;flaky&#8221;.  Well, using codelines such as &#8230;<\/p>\n<p><code><br \/>\n         \/\/ Middle child ...<br \/>\n         console.warn('here at 13 ' + ('' + new Date()) + ' ' + document.getElementById('myiframe').title + ' ?vid=' + ourvid + \"&playtime=\" + thisd + \"&start=\" + document.getElementById('i' + i).value.split(';')[0] + '&ct=' + encodeURIComponent(ndt.toUTCString()) + onestodoprefix + encodeURIComponent(onestodosuffix));<br \/>\n         \/\/ Grandchild ...<br \/>\n         console.log('' + ('' + new Date()) + ' ViD=' + vid + ' ivid=' + ivid + ' referrer=' + document.referrer + ' uRl=' + document.URL);<br \/>\n<\/code><\/p>\n<p> &#8230; with those timestamps and &#8220;relative isolation&#8221; into the console tab&#8217;s &#8220;Warning section&#8221; helping heaps, thanks <sup>to the powers that be<\/sup>!  It got us to where we knew when to intervene &#8230; a variable <i>kpi<\/i> became -1 (the one place possible being) &#8230;<\/p>\n<p><code><br \/>\n          kpi=-1;<br \/>\n          console.log('document.URL=' + document.URL + ' ' + ('' + new Date()));<br \/>\n          console.warn('document.URL=' + document.URL + ' ' + ('' + new Date()));<br \/>\n          keepParentInformed();<br \/>\n<\/code><\/p>\n<p> &#8230; the debugging information of which narrowed down the contention to <font color=blue>this fix<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction updatesc() {<br \/>\n    cnt+=one;<br \/>\n    cntpause+=onepause;<br \/>\n    if (toggle == 0) secscnt+=one;<br \/>\n    var ours=\"00\" + eval(secscnt % 60);<br \/>\n    var ourm=\"00\" + eval((secscnt - ours) \/ 60);<br \/>\n    suffix=\"#t=\" + ourm.substring(eval(ourm.length - 2)) + \"m\" + ours.substring(eval(ours.length - 2)) + \"s\";<br \/>\n    if (presuffix != \"\") presuffix=suffix;<br \/>\n    if (eval(eval(cnt) - eval(cntpause)) &gt;= duration && eval(duration) &gt; 0) { \/\/ && eval(playtime) &lt; 0) {<br \/>\n      if (tobechecked != null) {<br \/>\n          if (tobechecked.value != '') {<br \/>\n            document.getElementById('oform').submit();<br \/>\n          }<br \/>\n      } else if (nexturl != '') {<br \/>\n                                  console.warn('9875');<br \/>\n          if (urlis == '') location.href=nexturl;<br \/>\n      } else {<br \/>\n          secscnt=cnt;<br \/>\n          <font color=blue>if (('' + parent.document.URL + 's').replace(\/\\#https\/g,'') == ('' + parent.document.URL + 's')) { \/\/ but not for \"Radio Play\"<\/font><br \/>\n          stopVideo();<br \/>\n          <font color=blue>}<\/font><br \/>\n      }<br \/>\n    }<br \/>\n    if (window.parent) {<br \/>\n    if (parent.document.getElementById('i0')) {<br \/>\n       if (('' + parent.document.URL + 's').replace(\/\\#https\/g,'') != ('' + parent.document.URL + 's')) {<br \/>\n        \/\/top.document.title='x';<br \/>\n        if (('' + parent.document.getElementById('i0').title + ' ').indexOf('#') == 0 || ('' + top.window.sessionStorage.getItem('ssytemp')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n         \/\/top.document.title='z';<br \/>\n         \/\/alert(5643);<br \/>\n         monitorplh();<br \/>\n        }<br \/>\n       }<br \/>\n    }<br \/>\n    if (parent.document.getElementById('an_i_thingo')) {<br \/>\n    if (parent.document.getElementById('an_i_thingo').value != '') {<br \/>\n      parent.document.getElementById('an_i_thingo').value='';<br \/>\n         \/\/top.document.title='w';<br \/>\n         \/\/alert(5643);<br \/>\n         monitorplh();<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; which further contributed to less &#8230;<\/p>\n<blockquote style=font-size:34px;><p>\n&#x2744;&#xFE0F; &#8211; ( &#x2603;&#xFE0F; &#8211; &#x1F9CD;&#x200D;&#x2642;&#xFE0F; )\n<\/p><\/blockquote>\n<p> &#8230; via &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a><\/li>\n<\/ul>\n<p> &#8230; especially related to the grandparent level <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application&#8217;s &#8220;Radio Play&#8221; mode of use, where, now, if you are after some &#8220;<sup>single song obsessional<\/sup> looping&#8221; try unchecking all checkboxes except the one of your obsession <font size=1>&#8230; and good luck ending the itch!<\/font><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>But the codeline <sup>conditionally<\/sup>  ignored goes <i>stopVideo();<\/i> not <i>player.stopVideo();<\/i> &#8230; so what&#8217;s the go?  Well, with an OOP<sup>y<\/sup> class scenario with an instance of that class called <i>player<\/i> the two are equivalent.  You may also see <i>event.target.stopVideo();<\/i> which can also work within an event&#8217;s logic within the code of that class.  Sorry, but we crash around the brilliance of YouTube API class purity with lots of our own ideas that cloud issues.  How about the two days we spent thinking we could map <i>player<\/i> to an <i>altplayer<\/i> var<font size=1>iable<\/font> and over<sup>map<\/sup> <i>player<\/i> to our non-YouTube media window object &#8230; <\/p>\n<blockquote><p>\nNon <a target=\"_blank\" title='?' href='https:\/\/getyarn.io\/yarn-clip\/1737ecbf-d33d-4830-baf2-7db3f1f51d5b' rel=\"noopener\">good times<\/a>\n<\/p><\/blockquote>\n<p> <font size=1>&#8230; it got ditched &#8230; <\/font> otherwise our thinking would have extended to Javascript functions such as <i>stopVideo<\/i> being added to the non-class Javascript to address the execution swap over!  Bit crazy, thinking back, but luckily we no longer do any mapping of instances, you&#8217;ll be pleased to hear!<\/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\/youtube-api-caller-phase-two-console-warning-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Console Warning Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicpttct'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Phase Two Text Cursor Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-text-cursor-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Text Cursor Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Phase Two Text Cursor Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textual_cursor.jpg\" title=\"YouTube API Caller Phase Two Text Cursor Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Phase Two Text Cursor Tutorial<\/p><\/div>\n<p>As a bit of a sidestep away from the forward progress of yesterday&#8217;s <a title='YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial' href='#ytapicptomst'>YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>yes, we will get onto user data URI entries soon &#8230; but &#8230;<\/li>\n<li>let&#8217;s, today, for mobile platforms &#8230;\n<ol>\n<li>lament they cannot have the joy of the cursors non-mobile can show you on the non-mobile screen &#8230; and our favourite is cursor:progress as an easy way to say to the user &#8220;hang on &#8230; for a bit&#8221; &#8230; so we looked for &#8230;<\/li>\n<li>any way with &#8220;just text&#8221; (that we animate down the bottom of the leftmost table cell) &#8230; we can indicate &#8220;things are going on&#8221;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; and yes, we&#8217;ve applied this idea everywhere because it may help indicate to a user if they lose a connection, perhaps, too, as a secondary role this &#8230;<\/p>\n<blockquote><p>\ntext cursor\n<\/p><\/blockquote>\n<p> &#8230; could play.  It <font color=blue>consists of<\/font> &#8230;<\/p>\n<p>Javascript creating HTML as per &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n    if (window.opener) {<br \/>\n       if (document.URL.indexOf('isradio=') != -1 && document.URL.indexOf('youtube=') != -1) {<br \/>\n         radioblurb=' ... click on start song (when emojis appear) then we suggest minimising window small but on top (next to other work windows) for radio sequenced play';<br \/>\n         var doctt='' + document.title;<br \/>\n         document.title=String.fromCodePoint(128251) + ' ' + (location.search.split('regarding=')[1] ? decodeURIComponent(location.search.split('regarding=')[1].split('&')[0]) : '') + ' Radio Play ... ' + doctt;<br \/>\n       } else {<br \/>\n         radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';<br \/>\n       }<br \/>\n    } else if (document.URL.indexOf('isradio=') != -1) {<br \/>\n       radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';<br \/>\n       if (document.URL.indexOf('youtube=') != -1) {<br \/>\n         var xdoctt='' + document.title;<br \/>\n         document.title=String.fromCodePoint(128251) + ' ' + (location.search.split('regarding=')[1] ? decodeURIComponent(location.search.split('regarding=')[1].split('&')[0]) : '') + ' Radio Play ... ' + xdoctt;<br \/>\n       }<br \/>\n    }<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         radioblurb+=' and we recommend screen lock on';<br \/>\n    }<br \/>\n    for (var kk=1; kk&lt;=eval(100 * numc); kk++) {<br \/>\n     if (eval(kk % eval('' + bcol.length)) == 0) {<br \/>\n      dw+=('&lt;td class=loremipsum data-alt=\"\" data-curs=\"' + cursanim[cntcurs] + '\" alt=\"Cell ' + kk + radioblurb<font color=blue> + cursanim[cntcurs]<\/font> + '\" title=\"If not showing an image ( this one thanks to Lorem Picsum at https:\/\/picsum.photos\/ ) or to reveal it behind audio or video foreground content please double click here at cell ' + kk + '.\" ondblclick=refresh(this.id); id=\"td' + ('0000' + kk).slice(-4) + '\" style=\"min-width:' + amin + 'px;min-height:' + amin + 'px;width:' + amin + 'px;height:' + amin + \"px;background-color:\" + bcol[eval(kk % eval('' + bcol.length))] + \";\" + 'background-size:contain;background-repeat:no-repeat;\"&gt;' + grabcontent(eval(-1 + kk)) + '&lt;\/td&gt;');<br \/>\n      setTimeout(cursanimate, 600);<br \/>\n     } else {<br \/>\n      dw+=('&lt;td onmousedown=\"checkmeout(event,false);\" ontouchdown=\"checkmeout(event,false);\" oncontextmenu=\"checkmeout(event,true);\" class=inhouse data-alt=\"\" alt=\"Cell ' + kk + radioblurb<font color=blue> + cursanim[cntcurs]<\/font> + '\" title=\"If not showing an image ( yellow cell ones thanks to Lorem Picsum at https:\/\/picsum.photos\/ ) please double click here at cell ' + kk + ' or just click to get popup window of associated WordPress Blog Posting else right click for associated Cut to the Chase.\" ondblclick=refresh(this.id); id=\"td' + ('0000' + kk).slice(-4) + '\" style=\"min-width:' + amin + 'px;min-height:' + amin + 'px;width:' + amin + 'px;height:' + amin + \"px;background-color:\" + bcol[eval(kk % eval('' + bcol.length))] + \";\" + 'background-size:contain;background-repeat:no-repeat;\"&gt;' + grabcontent(eval(-1 + kk)) + '&lt;\/td&gt;');<br \/>\n     }<br \/>\n    }<br \/>\n    document.write(dw);<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and the accompanying CSS <font color=blue>text content creation means<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  td {<br \/>\n    border: 1px dotted green;<br \/>\n  }<br \/>\n  <br \/>\n  a {<br \/>\n    text-shadow:-1px 1px 1px #ff2d95;<br \/>\n    background-color:rgba(255,255,255,0.3);<br \/>\n  }<br \/>\n  <br \/>\n  .inhouse {<br \/>\n    vertical-align: bottom;<br \/>\n    padding-bottom: 20px;<br \/>\n  }<br \/>\n  <br \/>\n  <font color=blue>.inhouse::after {<br \/>\n    font-size: 8px;<br \/>\n    content: 'Media Gallery \\a RJM Programming \\a August, 2025 \\a Thanks to Lorem Picsum at https:\/\/picsum.photos\/  \\a Thanks to YouTube at https:\/\/youtube.com \\a ' attr(data-alt) attr(alt);<br \/>\n    white-space: pre-wrap;<br \/>\n  }<\/font><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; made to be more noticeable and animated via Javascript &#8230;<\/p>\n<p><code><br \/>\n var cntcurs=0, lastcurs=0, altlen=-1;<br \/>\n var cursanim=['   ',' | ', ' \/ ', ' - ', ' \\ '];<br \/>\n<br \/>\n function cursanimate() {<br \/>\n   if (altlen == -1) {<br \/>\n     if (document.getElementById('td0001').getAttribute('alt').indexOf(' (when emojis appear) ') != -1) {<br \/>\n      document.getElementById('td0001').setAttribute('alt', document.getElementById('td0001').getAttribute('alt').replace(' (when emojis appear) ', ' '));<br \/>\n     }<br \/>\n     altlen=eval(0 + eval('' + document.getElementById('td0001').getAttribute('alt').length));<br \/>\n   }<br \/>\n   lastcurs=cntcurs;<br \/>\n   cntcurs++;<br \/>\n   if (cntcurs &gt;= eval('' + cursanim.length)) { cntcurs=1;  }<br \/>\n   document.getElementById('td0001').setAttribute('alt', document.getElementById('td0001').getAttribute('alt').substring(0,altlen) + cursanim[cntcurs]);<br \/>\n   setTimeout(cursanimate, 600);<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; either straight away, or when the user should expect a delay, using <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application.<\/li>\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\/new-youtube-api-caller-phase-two-text-cursor-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Text Cursor Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicptomst'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-other-mimetypes-sharing-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/phasetwo_more_mimetypes_sharing.gif\" title=\"YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Phase Two Other Mimetypes Sharing Tutorial<\/p><\/div>\n<p>We were hoping we could say <i>&#8220;yesterday&#8217;s&#8221;<\/i> but, three days later, the struggle is over regarding work after <a title='YouTube API Caller Phase Two Other Mimetypes Tutorial' href='#ytapicptomt'>YouTube API Caller Phase Two Other Mimetypes Tutorial<\/a> regarding sharing with someone when including &#8230;<\/p>\n<blockquote>\n<ul>\n<li><sup>(albeit, so far, restricted)<\/sup> audio media mimetypes presented in an HTML audio element &#8230; and &#8230;<\/li>\n<li><sup>(albeit, so far, restricted)<\/sup> video media mimetypes presented in an HTML video element &#8230; while today we&#8217;re adding support for &#8230;<\/li>\n<li><sup>(albeit, so far, restricted)<\/sup> image media mimetypes presented in an HTML img element &#8230; and &#8230;<\/li>\n<li><sup>(albeit, so far, restricted)<\/sup> other mimetypes presented in an HTML iframe element<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; is achievable, but not for data URIs yet, just media URLs.  That is an upcoming struggle, we&#8217;re predicting?!<\/p>\n<p><a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=5FsJe4DScDs' rel=\"noopener\">Who<\/a>&#8216;d have thought <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=civzfZ_3uVc' rel=\"noopener\">Do You See What I See<\/a> could be so involved &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; &#8230; calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a><\/li>\n<\/ul>\n<p>&#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\/new-youtube-api-caller-phase-two-other-mimetypes-tutorial\/' rel=\"noopener\">New YouTube API Caller Phase Two Other Mimetypes Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicptomt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Phase Two Other Mimetypes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-other-mimetypes-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Other Mimetypes 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\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Phase Two Other Mimetypes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/phasetwo_more_mimetypes.jpg\" title=\"YouTube API Caller Phase Two Other Mimetypes Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Phase Two Other Mimetypes Tutorial<\/p><\/div>\n<p>Up until yesterday&#8217;s <a title='YouTube API Caller Phase Two Intermediate Buttons Tutorial' href='#ytapicptibt'>YouTube API Caller Phase Two Intermediate Buttons Tutorial<\/a> phase two user media work established &#8230;<\/p>\n<ul>\n<li><sup>(albeit, so far, restricted)<\/sup> audio media mimetypes presented in an HTML audio element &#8230; and &#8230;<\/li>\n<li><sup>(albeit, so far, restricted)<\/sup> video media mimetypes presented in an HTML video element &#8230; while today we&#8217;re adding support for &#8230;<\/li>\n<li><sup>(albeit, so far, restricted)<\/sup> image media mimetypes presented in an HTML img element &#8230; and &#8230;<\/li>\n<li><sup>(albeit, so far, restricted)<\/sup> other mimetypes presented in an HTML iframe element<\/li>\n<\/ul>\n<p>Not yet, but eventually, what we&#8217;re doing with the 3 hierarchies and hashtagging will be crucial for a sharing recipient to &#8220;see what you see&#8221;, and we needed tweaking of this to ensure the hashtagging order used corresponded to the order of user media (so far just URL) creations in those textboxes.<\/p>\n<p>We were also correct worrying about if two such user media URLs appeared in a row, but fixed this within &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html---------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html---------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; &#8230; calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> &#8230; in turn, calling &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html------------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a><\/li>\n<\/ul>\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\/youtube-api-caller-phase-two-other-mimetypes-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Other Mimetypes Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicptibt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Phase Two Intermediate Buttons Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-intermediate-buttons-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Intermediate Buttons 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\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Phase Two Intermediate Buttons Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/phasetwo_more_button_work.jpg\" title=\"YouTube API Caller Phase Two Intermediate Buttons Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Phase Two Intermediate Buttons Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='YouTube API Caller Phase Two Absolute URL Tutorial' href='#ytapicptaurlt'>YouTube API Caller Phase Two Absolute URL Tutorial<\/a>&#8216;s three tier <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application design &#8230;<\/p>\n<blockquote><p>\nHad we been letting middle child syndrome develop?\n<\/p><\/blockquote>\n<p>We&#8217;d not attended to a lot of the buttons to the right of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a>&#8216;s webpages, in any serious way during this latest push.  But the fact is, it is worth the effort, even in terms of them &#8230;<\/p>\n<ul>\n<li>helping better email share<\/li>\n<li>shore up recovery means should connections be lost during Radio Play<\/li>\n<li>help switch between video play and audio stream of video <sup>only<\/sup> play <sub>and vice versa<\/sub> modes of Radio Play<\/li>\n<\/ul>\n<p>The thing is, in the three tier design, we&#8217;ve introduced a new top tier as far as this middle tier player is concerned.  But we can tailor it to use those buttons differently, and we found the <i>onmousedown<\/i> and <i>ontouchdown<\/i> events related to those buttons often useful here, <font color=blue>depending on conditions<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar mbmode=false<font color=blue>, mbinter=''<\/font>;<br \/>\n<br \/>\nvar cbut=\"&lt;br&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div id='ddkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) {  location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&nbsp;&lt;input style=width:60%; onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '&gt;&lt;\/input&gt;&nbsp;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'&gt;&lt;\/input&gt;&nbsp;&lt;input id='karaoke' onclick=\\\" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;\/div&gt;&lt;\/div&gt;\";<br \/>\nvar cbutl=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div style=' \" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraoke' style=' display:inline; visibility: hidden;  '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input id='karaoke' onclick=\\\" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id='ddkaraoke' style='margin-top:-100px; visibility: hidden; \" + defidea + \" '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) { location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&lt;input onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&#10004; (&lt;a onclick=\\\" prearwo=window.open(this.getAttribute('data-href'),'_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400'); setInterval(arwoaudioablook, 5000); }, 1500);\\\" data-target=_blank id=arecord title='Thanks to https:\/\/online-voice-recorder.com\/#google_vignette ... if it works for your browser.  If not, you can consider using a desktop microphone recorder app such as Mac OS X QuickTime Player as an alternative perhaps.' data-href='https:\/\/online-voice-recorder.com\/#google_vignette'&gt;Record&lt;\/a&gt; own parts? &lt;input type=hidden id=justaudio\" + bsuffis + \" value=''&gt;&lt;\/input&gt;&lt;input style=visibility:hidden; onchanged='dorecord=!dorecord;' type=checkbox name=recown id=recown value='Record own parts?'&gt;&lt;\/input&gt;) \";<br \/>\n<font color=blue>if (window.parent) {<br \/>\n  if (('' + parent.document.URL + '&').indexOf('#http&') != -1 || ('' + parent.document.URL + '&').indexOf('isradio=') != -1) {<br \/>\n    mbinter=\" window.open(('' + parent.get_docurl()),'_top'); \";<br \/>\n    if (('' + parent.document.URL + '&').indexOf('justaudio=y') != -1) {<br \/>\n    cbut=\"&lt;br&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div id='ddkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) {  location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&nbsp;&lt;input style=width:60%; onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '&gt;&lt;\/input&gt;&nbsp;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'&gt;&lt;\/input&gt;&nbsp;&lt;input id='karaoke' onclick=\\\" \" + mbinter.replace(\",\",\".replace('justaudio','audjustio'),\") + \" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;\/div&gt;&lt;\/div&gt;\";<br \/>\n    cbutl=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div style=' \" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraoke' style=' display:inline; visibility: hidden;  '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input id='karaoke' onclick=\\\" \" + mbinter.replace(\",\",\".replace('justaudio','audjustio'),\") + \"  mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id='ddkaraoke' style='margin-top:-100px; visibility: hidden; \" + defidea + \" '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) { location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&lt;input onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&#10004; (&lt;a onclick=\\\" prearwo=window.open(this.getAttribute('data-href'),'_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400'); setInterval(arwoaudioablook, 5000); }, 1500);\\\" data-target=_blank id=arecord title='Thanks to https:\/\/online-voice-recorder.com\/#google_vignette ... if it works for your browser.  If not, you can consider using a desktop microphone recorder app such as Mac OS X QuickTime Player as an alternative perhaps.' data-href='https:\/\/online-voice-recorder.com\/#google_vignette'&gt;Record&lt;\/a&gt; own parts? &lt;input type=hidden id=justaudio\" + bsuffis + \" value=''&gt;&lt;\/input&gt;&lt;input style=visibility:hidden; onchanged='dorecord=!dorecord;' type=checkbox name=recown id=recown value='Record own parts?'&gt;&lt;\/input&gt;) \";<br \/>\n    topbuturl=('' + parent.get_docurl()).replace('justaudio','audjustio');<br \/>\n    mbinter=\"\"; \/\/mbinter=mbinter.replace(\",\",\".replace('justaudio','audjustio'),\");<br \/>\n    setTimeout(function(){<br \/>\n      if (document.getElementById('audioejkaraoke') || document.getElementById('repeat')) {<br \/>\n        if (document.getElementById('audioejkaraoke')) {<br \/>\n        document.getElementById('audioejkaraoke').type='button';<br \/>\n        document.getElementById('audioejkaraoke').onmousedown=function(){ window.open(topbuturl,'_top');  };<br \/>\n        document.getElementById('audioejkaraoke').ontouchdown=function(){ window.open(topbuturl,'_top');  };<br \/>\n        }<br \/>\n        if (document.getElementById('repeat')) {<br \/>\n         document.getElementById('repeat').onmousedown=function(){ if (document.URL.indexOf('i0=') != -1) { window.open(topbuturl,'_top');  } };<br \/>\n         document.getElementById('repeat').ontouchdown=function(){ if (document.URL.indexOf('i0=') != -1) { window.open(topbuturl,'_top');  } };<br \/>\n        }<br \/>\n      }<br \/>\n    }, 12000);<br \/>\n    } else {<br \/>\n    cbut=\"&lt;br&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div id='ddkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) {  location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&nbsp;&lt;input style=width:60%; onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '&gt;&lt;\/input&gt;&nbsp;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'&gt;&lt;\/input&gt;&nbsp;&lt;input id='karaoke' onclick=\\\" \" + mbinter + \" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;\/div&gt;&lt;\/div&gt;\";<br \/>\n    cbutl=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div style=' \" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraoke' style=' display:inline; visibility: hidden;  '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input id='karaoke' onclick=\\\" \" + mbinter + \"  mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id='ddkaraoke' style='margin-top:-100px; visibility: hidden; \" + defidea + \" '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) { location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&lt;input onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&#10004; (&lt;a onclick=\\\" prearwo=window.open(this.getAttribute('data-href'),'_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400'); setInterval(arwoaudioablook, 5000); }, 1500);\\\" data-target=_blank id=arecord title='Thanks to https:\/\/online-voice-recorder.com\/#google_vignette ... if it works for your browser.  If not, you can consider using a desktop microphone recorder app such as Mac OS X QuickTime Player as an alternative perhaps.' data-href='https:\/\/online-voice-recorder.com\/#google_vignette'&gt;Record&lt;\/a&gt; own parts? &lt;input type=hidden id=justaudio\" + bsuffis + \" value=''&gt;&lt;\/input&gt;&lt;input style=visibility:hidden; onchanged='dorecord=!dorecord;' type=checkbox name=recown id=recown value='Record own parts?'&gt;&lt;\/input&gt;) \";<br \/>\n    }<br \/>\n  } else if (('' + top.document.URL + '&').indexOf('#http&') != -1 || ('' + top.document.URL + '&').indexOf('isradio=') != -1) {<br \/>\n    mbinter=\" window.open(('' + parent.get_docurl()),'_top'); \";<br \/>\n    if (('' + parent.document.URL + '&').indexOf('justaudio=y') != -1) {<br \/>\n    cbut=\"&lt;br&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div id='ddkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) {  location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&nbsp;&lt;input style=width:60%; onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '&gt;&lt;\/input&gt;&nbsp;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'&gt;&lt;\/input&gt;&nbsp;&lt;input id='karaoke' onclick=\\\" \" + mbinter.replace(\",\",\".replace('justaudio','audjustio'),\") + \" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;\/div&gt;&lt;\/div&gt;\";<br \/>\n    cbutl=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div style=' \" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraoke' style=' display:inline; visibility: hidden;  '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input id='karaoke' onclick=\\\" \" + mbinter.replace(\",\",\".replace('justaudio','audjustio'),\") + \"  mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id='ddkaraoke' style='margin-top:-100px; visibility: hidden; \" + defidea + \" '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) { location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&lt;input onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&#10004; (&lt;a onclick=\\\" prearwo=window.open(this.getAttribute('data-href'),'_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400'); setInterval(arwoaudioablook, 5000); }, 1500);\\\" data-target=_blank id=arecord title='Thanks to https:\/\/online-voice-recorder.com\/#google_vignette ... if it works for your browser.  If not, you can consider using a desktop microphone recorder app such as Mac OS X QuickTime Player as an alternative perhaps.' data-href='https:\/\/online-voice-recorder.com\/#google_vignette'&gt;Record&lt;\/a&gt; own parts? &lt;input type=hidden id=justaudio\" + bsuffis + \" value=''&gt;&lt;\/input&gt;&lt;input style=visibility:hidden; onchanged='dorecord=!dorecord;' type=checkbox name=recown id=recown value='Record own parts?'&gt;&lt;\/input&gt;) \";<br \/>\n    topbuturl=('' + parent.get_docurl()).replace('justaudio','audjustio');<br \/>\n    mbinter=\"\"; \/\/mbinter=mbinter.replace(\",\",\".replace('justaudio','audjustio'),\");<br \/>\n    setTimeout(function(){<br \/>\n      if (document.getElementById('audioejkaraoke') || document.getElementById('repeat')) {<br \/>\n        if (document.getElementById('audioejkaraoke')) {<br \/>\n        document.getElementById('audioejkaraoke').type='button';<br \/>\n        document.getElementById('audioejkaraoke').onmousedown=function(){ window.open(topbuturl,'_top');  };<br \/>\n        document.getElementById('audioejkaraoke').ontouchdown=function(){ window.open(topbuturl,'_top');  };<br \/>\n        }<br \/>\n        if (document.getElementById('repeat')) {<br \/>\n         document.getElementById('repeat').onmousedown=function(){ if (document.URL.indexOf('i0=') != -1) { window.open(topbuturl,'_top');  } };<br \/>\n         document.getElementById('repeat').ontouchdown=function(){ if (document.URL.indexOf('i0=') != -1) { window.open(topbuturl,'_top');  } };<br \/>\n        }<br \/>\n      }<br \/>\n    }, 12000);<br \/>\n    } else {<br \/>\n    cbut=\"&lt;br&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div id='ddkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) {  location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&nbsp;&lt;input style=width:60%; onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '&gt;&lt;\/input&gt;&nbsp;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'&gt;&lt;\/input&gt;&nbsp;&lt;input id='karaoke' onclick=\\\" \" + mbinter + \" mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;div id='dkaraoke' style='display:inline; visibility: hidden; '&gt;&lt;\/div&gt;&lt;\/div&gt;\";<br \/>\n    cbutl=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div style=' \" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraoke' style=' display:inline; visibility: hidden;  '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input id='karaoke' onclick=\\\" \" + mbinter + \"  mbmode=false; document.getElementById('ddkaraoke').style.visibility='visible'; if (document.URL.indexOf('i0=') != -1) { next=0; } queuenext();\\\" type='submit' style='background-color:orange;' value='Play Karaoke Style YouTube Via Entries Below'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;div id='ddkaraoke' style='margin-top:-100px; visibility: hidden; \" + defidea + \" '&gt;&lt;div style='\" + defidea + \"'&gt;&lt;div style='\" + defidea + \"'&gt;&lt;input onclick=\\\"if (document.URL.indexOf('i0=') != -1) { location.href=itd(document.URL); } \\\" id='repeat' type='button' style='background-color:red;' value='Replay Karaoke Style YouTube Above'&gt;&lt;\/input&gt;&lt;br&gt;&lt;input onclick=clickto(); id=karaokeshare value='Email Share to ' type='button'&gt;&lt;\/input&gt;&lt;input onblur=doto(this.value); type=text name=email id=karaokeemail value=&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&#10004; (&lt;a onclick=\\\" prearwo=window.open(this.getAttribute('data-href'),'_blank','top=' + eval(-400 + screen.height) + ',left=' + eval(-1050 + screen.width) + ',width=500,height=400'); setInterval(arwoaudioablook, 5000); }, 1500);\\\" data-target=_blank id=arecord title='Thanks to https:\/\/online-voice-recorder.com\/#google_vignette ... if it works for your browser.  If not, you can consider using a desktop microphone recorder app such as Mac OS X QuickTime Player as an alternative perhaps.' data-href='https:\/\/online-voice-recorder.com\/#google_vignette'&gt;Record&lt;\/a&gt; own parts? &lt;input type=hidden id=justaudio\" + bsuffis + \" value=''&gt;&lt;\/input&gt;&lt;input style=visibility:hidden; onchanged='dorecord=!dorecord;' type=checkbox name=recown id=recown value='Record own parts?'&gt;&lt;\/input&gt;) \";<br \/>\n    }<br \/>\n  }<br \/>\n}<\/font><br \/>\nvar cbutm=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraokem' style='display:inline; visibility: hidden; '&gt;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Below via Mouse Video Pauses'&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;Start time in seconds &lt;span id=nm style='display:none;'&gt;(negative means you will be singing or Prefix by Audio file URL or YouTube ID delimited by :)&lt;\/span&gt;\";<br \/>\nvar cbutr=\"&lt;div style='\" + defidea + \" height: 60px;'&gt;&lt;div id='dkaraoker' style='display:inline; visibility: hidden;  '&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id='mousej' type='button' style=' background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Starting with '&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;br&gt;&lt;span style=text-align:right;width:100%;&gt;Finish&lt;\/span&gt;\";<br \/>\n<br \/>\nvar audiobut='';<br \/>\n  if (<font color=blue>(mbinter != '' && ('' + parent.document.URL).indexOf('justaudio=y') != -1) || ((documentURL + '&' + asuffis).indexOf('justaudio=&') != -1 && <\/font>(documentURL.indexOf('youtube_duration=&') == -1 && documentURL.indexOf('youtube_duration=') != -1) && documentURL.indexOf('youtubeid=') != -1 && documentURL.indexOf('emoji=') != -1)) {<br \/>\n    audiobut=('&lt;input class=\"emoji\" id=\"audioejkaraoke\" onclick=\"<font color=blue> ' + mbinter + '<\/font> document.getElementById(`myiframe`).style.marginTop=`0px`;  document.getElementById(`myiframe`).style.opacity=`1`; document.getElementById(`myiframe`).style.filter=\"invert(0)\"; this.style.display=`none`; \" type=\"submit\" style=\"background-color: orange; visibility: visible;\" value=\"' + String.fromCodePoint(128249) + ' Play Video as below\" title=\"Play Karaoke Style YouTube Video Via Entries Below\"&gt;').replace(\/\\`\/g,\"'\");<br \/>\n  <font color=blue>} else if (('' + parent.document.URL).indexOf('justaudio=y') != -1) {<br \/>\n    audiobut=('&lt;input class=\"emoji\" id=\"audioejkaraoke\" onclick=\" document.getElementById(`justaudio`).name=`justaudio`; ' + mbinter.replace(\",\",\".replace('?','?justaudio=y&'),\") + ' mbmode=false; document.getElementById(`ddejkaraoke`).style.visibility=`visible`; if (document.URL.indexOf(`i0=`) != -1) { next=0; } isendof=ieo; queuenext();  \" type=\"submit\" style=\"background-color: orange; visibility: visible;\" value=\"' + String.fromCodePoint(128483) + ' Play Video as below\" title=\"Play Karaoke Style YouTube Video Via Entries Below\"&gt;').replace(\/\\`\/g,\"'\");<\/font><br \/>\n  } else {<br \/>\n    audiobut=('&lt;input class=\"emoji\" id=\"audioejkaraoke\" onclick=\" document.getElementById(`justaudio`).name=`justaudio`; <font color=blue>' + mbinter.replace(\",\",\".replace('?','?justaudio=y&'),\") + '<\/font> mbmode=false; document.getElementById(`ddejkaraoke`).style.visibility=`visible`; if (document.URL.indexOf(`i0=`) != -1) { next=0; } isendof=ieo; queuenext();  \" type=\"submit\" style=\"background-color: orange; visibility: visible;\" value=\"' + String.fromCodePoint(128483) + ' Play Audio as below\" title=\"Play Karaoke Style YouTube Audio Via Entries Below\"&gt;').replace(\/\\`\/g,\"'\");<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; helping out in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html--------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html--------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; mode of use.<\/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\/new-youtube-api-caller-phase-two-absolute-url-tutorial\/' rel=\"noopener\">New YouTube API Caller Phase Two Absolute URL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicptaurlt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Phase Two Absolute URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-phase-two-absolute-url-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Absolute URL 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\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Phase Two Absolute URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/phasetwo_more.gif\" title=\"YouTube API Caller Phase Two Absolute URL Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Phase Two Absolute URL Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='YouTube API Caller Other Media Playlist Regarding Tutorial' href='#ytapicomprt'>YouTube API Caller Other Media Playlist Regarding Tutorial<\/a> it&#8217;s taken a long time, even for the <i>conditional blurb<\/i> below to crystallize, but &#8230;<\/p>\n<ul>\n<li>regarding testing we only did, so far, on non-mobile regarding Radio Play interspersing of <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> media video plays with non-YouTube ones, so far &#8230;<\/li>\n<li>regarding users entering their own URLs into the textboxes next to the left hand checkboxes during Radio Play usage &#8230;<\/li>\n<li>regarding user entered absolute or relative URLs <font size=1>(but not data URIs yet)<\/font> &#8230;<\/li>\n<li>pointing to audio or video media mimetype data <font size=1>(so far)<\/font><\/li>\n<\/ul>\n<p> &#8230; we finally think we have a presentable web application scenario, worth putting <i>into the mix<\/i>.<\/p>\n<p>This concerns the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application in &#8220;Radio Play&#8221; mode of use  helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in turn helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a>.<\/p>\n<p>Pretty obviously, more to do, and more to shore up, but encouraging signs it&#8217;s all possible, this interspersing of <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> media video plays with non-YouTube ones!<\/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\/youtube-api-caller-phase-two-absolute-url-tutorial\/' rel=\"noopener\">YouTube API Caller Phase Two Absolute URL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomprt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Playlist Regarding Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-playlist-regarding-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Regarding 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\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Playlist Compilation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/playlist_regarding.gif\" title=\"YouTube API Caller Other Media Playlist Compilation Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Playlist Regarding Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='YouTube API Caller Other Media Playlist Compilation Tutorial' href='#ytapicompct'>YouTube API Caller Other Media Playlist Compilation Tutorial<\/a> it&#8217;s not going to cut the mustard with as many users &#8230;<\/p>\n<blockquote><p>\n &#8230; if you forget to put front and center what it is the user has given you as a piece of their information &#8230;\n<\/p><\/blockquote>\n<p> &#8230; rather than what some of us <font size=1>(cough, cough)<\/font> can tend to do as software developers, and bury this in the data out of sight.<\/p>\n<p>What could be better than yesterday&#8217;s <i>allowing via emoji &#x1F500; button for Playlist creation via 11 character <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video ID list<\/i>, albeit &#8220;some people&#8217;s cup of tea&#8221;, than to place the whole &#8230;<\/p>\n<blockquote><p>\nPlaylist Th<strike>a<\/strike>ing\n<\/p><\/blockquote>\n<p> &#8230; back into a user driven chance to control matters?  <font color=blue>In other words<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction createplaylist(insvalo) {<br \/>\n  <font color=blue>var tdsare=[], itds=0, itdone=false;;<br \/>\n  var oklast=['A','E','I','M','Q','U','Y','c','g','k','o','s','w','0','4','8'];<\/font><br \/>\n  var argshuf='';<br \/>\n  var plist=prompt('Enter YouTube 11 character code video (comma separated) or audio stream only of video (semicolon separated) list to Radio Play (and add ! to start in shuffle mode)<font color=blue> ... or a YouTube Search String basis to create a playlist via a Radio' + String.fromCodePoint(128251) + '? button to activate, later<\/font>.', '');<br \/>\n  if (plist != null) {<br \/>\n   <font color=blue>if (plist.trim() != '') {<br \/>\n   if (plist.trim().indexOf(' ') != -1 || eval('' + plist.trim().split(',')[0].split(';')[0].length) != 11 || oklast.indexOf(plist.trim().split(',')[0].split(';')[0].slice(-1)) == -1) {<br \/>\n   tdsare=document.getElementsByTagName('td');<br \/>\n   for (itds=0; itds&lt;tdsare.length; itds++) {<br \/>\n   if (!itdone && tdsare[itds].innerHTML == '' && ('' + tdsare[itds].id) != 'td0001') {<br \/>\n     itdone=true;<br \/>\n     tdsare[itds].innerHTML='&lt;iframe style=\"width:100%;height:100%;\" id=karsearch name=karsearch src=\"\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=++++++++++++' + encodeURIComponent(plist.trim()) + '&minimize=y&youtube_duration=&email=&emoji=on&clickcheck=y\"&gt;&lt;\/iframe&gt;';<br \/>\n     tdsare[itds].scrollIntoView();<br \/>\n   }<br \/>\n   }<br \/>\n   } else {<\/font><br \/>\n   if (plist.replace(\/\\!$\/g,'') != plist) { argshuf='&shuffle=y';  }<br \/>\n   if (plist.indexOf(';') != -1 && plist.indexOf(',') == -1) {<br \/>\n     window.open('.\/swipe_media.html?isradio=y' + argshuf + '&audioyoutube=' + encodeURIComponent(extraatendmaybe(plist.replace(\/\\;\/g,',').replace(\/\\!$\/g,''),'isradio=y' + argshuf)),'_blank');<br \/>\n   } else {<br \/>\n     window.open('.\/swipe_media.html?isradio=y' + argshuf + '&youtube=' + encodeURIComponent(extraatendmaybe(plist.replace(\/\\;\/g,',').replace(\/\\!$\/g,''),'isradio=y' + argshuf)),'_blank');<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n  <font color=blue>}<\/font><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and should the user go on to remember that playlist, what they entered as a YouTube Search String basis gets remembered in Radio Play webpage titling (and hence, in web browser window name lists).  And the user can see how the playlist was created, especially if they named their recallable playlist well, in a more transparent way in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; mode of use, now allowing via emoji &#x1F500; button for Playlist creation via 11 character <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video ID lists, all helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a>.<\/p>\n<p>Some <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html?regarding=Vikki%20%20Carr&#038;isradio=y&#038;youtube=J-qgHOQ1ofg,Xx-mH4hCUR0,k6mtjAco7Vo,J_lOIKtHZjw,ZA92Ab-IeNc,xo699lRq3-E' rel=\"noopener\">Vikki Carr<\/a> magic, any<sup title='Sorry, Ferris Bueller fans.'>one<\/sup>?!<\/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\/youtube-api-caller-other-media-playlist-regarding-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Regarding Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicompct'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Playlist Compilation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-playlist-compilation-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Compilation 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\/swipe_media.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Playlist Compilation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/playlist_compilation.gif\" title=\"YouTube API Caller Other Media Playlist Compilation Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Playlist Compilation Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='YouTube API Caller Other Media Playlist Recall Tutorial' href='#ytapicomprt'>YouTube API Caller Other Media Playlist Recall Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>work has progressed on Phase Two integrations, sideways then forwards, and &#8220;getting there&#8221; &#8230; but for the meantime there are other features we want here &#8230;<\/li>\n<li>like a way to compile songs from our three featured music ideas into an immediately shuffled longer playlist &#8230;<\/li>\n<\/ul>\n<p> &#8230; via double clicks on Radio Play &#128251; emojis, as per &#8230;<\/p>\n<p><code><br \/>\n var independent=true, didothers=false;<br \/>\n <br \/>\n function triplewhammy() {<br \/>\n   independent=false;<br \/>\n   location.hash='#independent=false';<br \/>\n   argshuffle='&shuffle=y';<br \/>\n   prefix='isradio=y' + argshuffle + '&';<br \/>\n   dodisco('ISRADIO=BDISCOAVB&');<br \/>\n   setTimeout(function(){<br \/>\n   prefix='isradio=y' + argshuffle + '&';<br \/>\n   dowc('ISRADIO=BWCAVB&');<br \/>\n   }, 3000);<br \/>\n   setTimeout(function(){<br \/>\n   prefix='isradio=y' + argshuffle + '&';<br \/>\n   doyr('ISRADIO=BYRAVB&');<br \/>\n   }, 7000);<br \/>\n   setTimeout(function(){  independent=true; }, 37000);<br \/>\n }<br \/>\n<br \/>\n  function split_embed(iois) {<br \/>\n    var iso=-1;<br \/>\n    if (('' + location.hash).indexOf('independent') != -1) { independent=false; iso=0;  }<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n         var tyembeds=aconto.body.innerHTML.split('\/embed\/');<br \/>\n         if (eval('' + tyembeds.length) &lt;= 1) {  setTimeout(function(){ checkiflater(document.getElementById(iois.id));  }, 6000);  } else {<br \/>\n         for (var it=1; it&lt;tyembeds.length; it++) {<br \/>\n         if (iso &lt; 0 || iso &lt; 9) {<br \/>\n         if (iso &gt;= 0) { iso++ }<br \/>\n        if (ytlist.trim() == '') {<br \/>\n          ytlist+='' + tyembeds[it].substring(0,11);<br \/>\n        } else {<br \/>\n          ytlist+=',' + tyembeds[it].substring(0,11);<br \/>\n        }<br \/>\n         }<br \/>\n         }<br \/>\n         if (ytlist != '') {<br \/>\n          if (prefix.indexOf('isradio=') != -1 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n           if (ytwo) {<br \/>\n             if (!ytwo.closed) {<br \/>\n                ytwo.close();<br \/>\n                ytwo=null;<br \/>\n             }<br \/>\n             ytwo=null;<br \/>\n           }<br \/>\n           if (!independent) {<br \/>\n           prefix='isradio=y' + argshuffle + '&';<br \/>\n           }<br \/>\n           if (!didothers) {<br \/>\n           ytwo=window.open(document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim()),'_blank','top=0,left=0,width=' + screen.width + ',height=' + screen.height);<br \/>\n           } else {<br \/>\n           setTimeout(function(){<br \/>\n           ytwo=window.open(document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim()),'_blank','top=0,left=0,width=' + screen.width + ',height=' + screen.height);<br \/>\n           }, 4000);<br \/>\n           }<br \/>\n          } else {<br \/>\n           if (!independent) {<br \/>\n           prefix='isradio=y' + argshuffle + '&';<br \/>\n           }<br \/>\n           if (!didothers) {<br \/>\n           location.href=document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim());<br \/>\n           } else {<br \/>\n           setTimeout(function(){<br \/>\n           location.href=document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim());<br \/>\n           }, 4000);<br \/>\n           }<br \/>\n           \/\/}<br \/>\n          }<br \/>\n         }<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function split_embed_two(iois) {<br \/>\n    \/\/didothers=true;<br \/>\n    var iso=-1;<br \/>\n    if (('' + location.hash).indexOf('independent') != -1) { independent=false;  iso=0; }<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n         var tyembeds=aconto.body.innerHTML.split('\/embed\/');<br \/>\n         if (eval('' + tyembeds.length) &lt;= 1) {  setTimeout(function(){ checkiflater(document.getElementById(iois.id));  }, 6000);  } else {<br \/>\n         for (var it=1; it&lt;tyembeds.length; it++) {<br \/>\n         if (iso &lt; 0 || iso &lt; 9) {<br \/>\n         if (iso &gt;= 0) { iso++ }<br \/>\n        if (ytlist.trim() == '') {<br \/>\n          ytlist+='' + tyembeds[it].substring(0,11);<br \/>\n        } else {<br \/>\n          ytlist+=',' + tyembeds[it].substring(0,11);<br \/>\n        }<br \/>\n         }<br \/>\n         }<br \/>\n         if (ytlist != '') {<br \/>\n          if (prefix.indexOf('isradio=') != -1 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n           if (ytwo) {<br \/>\n             if (!ytwo.closed) {<br \/>\n                ytwo.close();<br \/>\n                ytwo=null;<br \/>\n             }<br \/>\n             ytwo=null;<br \/>\n           }<br \/>\n           if (1 == 5) {<br \/>\n           ytwo=window.open(document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim()),'_blank','top=0,left=0,width=' + screen.width + ',height=' + screen.height);<br \/>\n           }<br \/>\n          } else {<br \/>\n           if (1 == 5) {<br \/>\n           location.href=document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim());<br \/>\n           }<br \/>\n          }<br \/>\n         }<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function split_embed_three(iois) {<br \/>\n    \/\/didothers=true;<br \/>\n    var iso=-1;<br \/>\n    if (('' + location.hash).indexOf('independent') != -1) { independent=false; iso=0;  }<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n         var tyembeds=aconto.body.innerHTML.split('\/embed\/');<br \/>\n         if (eval('' + tyembeds.length) &lt;= 1) {  setTimeout(function(){ checkiflater(document.getElementById(iois.id));  }, 6000);  } else {<br \/>\n         for (var it=1; it&lt;tyembeds.length; it++) {<br \/>\n         if (iso &lt; 0 || iso &lt; 9) {<br \/>\n         if (iso &gt;= 0) { iso++ }<br \/>\n        if (ytlist.trim() == '') {<br \/>\n          ytlist+='' + tyembeds[it].substring(0,11);<br \/>\n        } else {<br \/>\n          ytlist+=',' + tyembeds[it].substring(0,11);<br \/>\n        }<br \/>\n         }<br \/>\n         }<br \/>\n         if (ytlist != '') {<br \/>\n          if (prefix.indexOf('isradio=') != -1 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n           if (ytwo) {<br \/>\n             if (!ytwo.closed) {<br \/>\n                ytwo.close();<br \/>\n                ytwo=null;<br \/>\n             }<br \/>\n             ytwo=null;<br \/>\n           }<br \/>\n           if (1 == 5) {<br \/>\n           ytwo=window.open(document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim()),'_blank','top=0,left=0,width=' + screen.width + ',height=' + screen.height);<br \/>\n           }<br \/>\n          } else {<br \/>\n           if (1 == 5) {<br \/>\n           location.href=document.URL.split('?')[0].split('#')[0] + '?' + prefix + 'youtube=' + encodeURIComponent(extraatendmaybe(ytlist,prefix).trim());<br \/>\n           }<br \/>\n          }<br \/>\n         }<br \/>\n         }<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function dodisco(dwhat) {<br \/>\n    if (independent) {<br \/>\n    if (prefix.indexOf('shuffle=') == -1) { prefix=dwhat; }<br \/>\n    document.getElementById('spareif').src='\/HTMLCSS\/disco_version.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    } else if (dwhat == dwhat.toUpperCase()) {<br \/>\n    if (ytlist == '') { ytlist=' '; }<br \/>\n    document.getElementById('spareifthree').src='\/HTMLCSS\/disco_version.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    \/\/document.getElementById('spareiftwo').src='\/HTMLCSS\/the_wrecking_crew.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    \/\/document.getElementById('spareif').src='\/HTMLCSS\/yacht_rock.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function dowc(dwhat) {<br \/>\n    if (independent) {<br \/>\n    if (prefix.indexOf('shuffle=') == -1) { prefix=dwhat; }<br \/>\n    document.getElementById('spareif').src='\/HTMLCSS\/the_wrecking_crew.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    } else if (dwhat == dwhat.toUpperCase()) {<br \/>\n    if (ytlist == '') { ytlist=' '; }<br \/>\n    \/\/document.getElementById('spareifthree').src='\/HTMLCSS\/disco_version.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    document.getElementById('spareiftwo').src='\/HTMLCSS\/the_wrecking_crew.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    \/\/document.getElementById('spareif').src='\/HTMLCSS\/yacht_rock.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function doyr(dwhat) {<br \/>\n    if (independent) {<br \/>\n    if (prefix.indexOf('shuffle=') == -1) { prefix=dwhat; }<br \/>\n    document.getElementById('spareif').src='\/HTMLCSS\/yacht_rock.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    } else if (dwhat == dwhat.toUpperCase()) {<br \/>\n    if (ytlist == '') { ytlist=' '; }<br \/>\n    \/\/document.getElementById('spareifthree').src='\/HTMLCSS\/disco_version.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    \/\/document.getElementById('spareiftwo').src='\/HTMLCSS\/the_wrecking_crew.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    document.getElementById('spareif').src='\/HTMLCSS\/yacht_rock.html?rand=' + Math.floor(Math.random() * 1987865);<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; mode of use, now allowing via emoji &#x1F500; button for Playlist creation via 11 character <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video ID lists, all helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/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\/youtube-api-caller-other-media-playlist-compilation-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Compilation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomprt'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Playlist Recall Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-playlist-recall-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Recall 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\/karaoke_youtube_api.htm#http\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Playlist Recall Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/playlist_recall.gif\" title=\"YouTube API Caller Other Media Playlist Recall Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Playlist Recall Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='YouTube API Caller Other Media Playlist Creation Tutorial' href='#xytapicompct'>YouTube API Caller Other Media Playlist Creation Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>work has progressed on Phase Two integrations, forwards, and &#8220;getting there&#8221; &#8230; but for the meantime there are other features we want here &#8230;<\/li>\n<li>like more ways to recall user determined YouTube derived playlists and we found that &#8230;<\/li>\n<\/ul>\n<p> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a>&#8216;s playlist recall functionality needed <font color=blue>this overhaul<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>function hoverplaylist(tboxrelo, doprompt) {<br \/>\n                var p_ans='';<br \/>\n                perused_list='';<br \/>\n                Object.keys(window.localStorage).forEach(function(key){<br \/>\n                if (('' + key).indexOf('tube') == 0) {<br \/>\n                 if (perused_list == '') { perused_list=tboxrelo.title.split(String.fromCharCode(10))[0] + String.fromCharCode(10) + ' ( and we found )'; }<br \/>\n                 perused_list=perused_list.replace(' )', ' ' + String.fromCharCode(10) + key.replace('tube_','').replace(\/\\-\/g,' ') + String.fromCharCode(10) + ' )');<br \/>\n                } else if (('' + key).indexOf('karaoke_youtube_api-') == 0) {<br \/>\n                 if (perused_list == '') { perused_list=tboxrelo.title.split(String.fromCharCode(10))[0] + String.fromCharCode(10) + ' ( and we found )'; }<br \/>\n                 perused_list=perused_list.replace(' )', ' ' + String.fromCharCode(10) + key.replace('karaoke_youtube_api-','').replace(\/\\-\/g,' ') + String.fromCharCode(10) + ' )');<br \/>\n                }<br \/>\n                });<br \/>\n                if (perused_list != '') { tboxrelo.title=perused_list; p_ans=null; if (doprompt) { p_ans=prompt(perused_list,perused_list); }  if (p_ans != null) { if (p_ans != perused_list) { if (document.getElementById('namethechk') && document.URL.indexOf('#http') != -1 && !document.getElementById('namechk').checked) { document.getElementById('namethechk').value=p_ans; saveplaylist(); } }  }  }<br \/>\n}<\/font><br \/>\n<br \/>\nfunction saveplaylist() {<br \/>\n if (document.getElementById('namechk') && document.getElementById('namethechk') && document.URL.indexOf('#http') != -1) {<br \/>\n  <font color=blue>if (!document.getElementById('namechk').checked && document.getElementById('namethechk').value.trim() != '') {<br \/>\n    if (document.getElementById('namethechk').value.indexOf('tube_') == 0 || document.getElementById('namethechk').value.indexOf('karaoke_youtube_api-') == 0) {<br \/>\n    if (('' + window.localStorage.getItem(document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n    window.open(decodeURIComponent(window.localStorage.getItem(document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))), '_blank', 'top=100,left=100,width=800,height=800');<br \/>\n    document.getElementById('namethechk').placeholder=document.getElementById('namethechk').value;<br \/>\n    document.getElementById('namethechk').title=document.getElementById('namethechk').title.replace(document.getElementById('namethechk').value, String.fromCharCode(10) + ' and you selected ' + String.fromCharCode(10) + document.getElementById('namethechk').value);<br \/>\n    document.getElementById('namethechk').value='';<br \/>\n    }<br \/>\n    } else if (('' + window.localStorage.getItem('karaoke_youtube_api-' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n    window.open(decodeURIComponent(window.localStorage.getItem('karaoke_youtube_api-' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))), '_blank', 'top=100,left=100,width=800,height=800');<br \/>\n    document.getElementById('namethechk').placeholder=document.getElementById('namethechk').value;<br \/>\n    document.getElementById('namethechk').title=document.getElementById('namethechk').title.replace(document.getElementById('namethechk').value, String.fromCharCode(10) + ' and you selected ' + String.fromCharCode(10) + document.getElementById('namethechk').value);<br \/>\n    document.getElementById('namethechk').value='';<br \/>\n    } else if (('' + window.localStorage.getItem('tube_' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n    window.open(decodeURIComponent(window.localStorage.getItem('tube_' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))), '_blank', 'top=100,left=100,width=800,height=800');<br \/>\n    document.getElementById('namethechk').placeholder=document.getElementById('namethechk').value;<br \/>\n    document.getElementById('namethechk').title=document.getElementById('namethechk').title.replace(document.getElementById('namethechk').value, String.fromCharCode(10) + ' and you selected ' + String.fromCharCode(10) + document.getElementById('namethechk').value);<br \/>\n    document.getElementById('namethechk').value='';<br \/>\n    }<br \/>\n  } else <\/font>if (document.getElementById('namechk').checked && document.getElementById('namethechk').value.trim() != '') {<br \/>\n    if (('' + window.localStorage.getItem('karaoke_youtube_api-' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n      window.localStorage.removeItem('karaoke_youtube_api-' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'));<br \/>\n    }<br \/>\n    if (('' + window.localStorage.getItem('tube_' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'))).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n      window.localStorage.removeItem('tube_' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'));<br \/>\n    }<br \/>\n    <font color=blue>var wpd='';<br \/>\n    if (window.parent) {<br \/>\n      if (parent.document.URL.indexOf('\/swipe_media.htm') != -1) {<br \/>\n        wpd=parent.get_doc();<br \/>\n      }<br \/>\n    }<br \/>\n    if (wpd != '') {<br \/>\n    window.localStorage.setItem('tube_' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'), encodeURIComponent(decodeURIComponent(wpd)));<br \/>\n    } else <\/font>if (docURL != document.URL || ('' + document.URL + 's').replace(\/\\#https\/g,'') != ('' + document.URL + 's')) {<br \/>\n    window.localStorage.setItem('karaoke_youtube_api-' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'), encodeURIComponent(decodeURIComponent(docURL)));<br \/>\n    } else {<br \/>\n    window.localStorage.setItem('karaoke_youtube_api-' + document.getElementById('namethechk').value.replace(\/\\ \/g, '-'), encodeURIComponent(decodeURIComponent(document.URL.split('#')[1]).split('&loop=')[0].split('&name=')[0] + '#' + document.URL.split('#')[1]));<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and feeding this into the workings of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; mode of use.<\/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\/youtube-api-caller-other-media-playlist-recall-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Recall Tutorial<\/a>.<\/p-->\n<hr>\n<p id='xytapicompct'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Playlist Creation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-playlist-creation-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Creation 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\/karaoke_youtube_api.htm#http\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Playlist Creation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/playlist_creation.gif\" title=\"YouTube API Caller Other Media Playlist Creation Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Playlist Creation Tutorial<\/p><\/div>\n<p>Onto the recent  <a title='YouTube API Caller Other Media Phase Two Iframe Tutorial' href='#ytapicomptit'>YouTube API Caller Other Media Phase Two Iframe Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>work has progressed on Phase Two integrations, forwards, and &#8220;getting there&#8221; &#8230; but for the meantime there are other features we want here &#8230;<\/li>\n<li>like more ways to create user determined YouTube derived playlists and the best place we&#8217;ve found for this is via <\/li>\n<\/ul>\n<p> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a>&#8216;s YouTube Search capabilities.<\/p>\n<p>These searches off that top textbox can lead to a &#8230;<\/p>\n<ul>\n<li>(user should select) multi-select dropdown &#8230; off which the user could select a number of YouTube videos (without having to know their 11 character IDs) &#8230; and then &#8230;<\/li>\n<li>click the new Radio&#128251;? button &#8230; to hook in with &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a> web application &#8220;Radio Play&#8221; mode of use<\/li>\n<\/ul>\n<p>Stay tuned for more ways to create playlists!<\/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\/youtube-api-caller-other-media-playlist-creation-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Playlist Creation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomptit'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Phase Two Iframe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-phase-two-iframe-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Phase Two Iframe 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\/karaoke_youtube_api.htm#http\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Phase Two Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_via_popup.gif\" title=\"YouTube API Caller Other Media Phase Two Iframe Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Phase Two Iframe Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='YouTube API Caller Other Media Phase Two Interfacing Tutorial' href='#ytapicomptit'>YouTube API Caller Other Media Phase Two Interfacing Tutorial<\/a> featured the use of &#8230;<\/p>\n<ul>\n<li>popup windows &#8230; much maligned &#8230; so if there is a way we can transfer to the less maligned &#8230;<\/li>\n<li>iframe<\/li>\n<\/ul>\n<p> &#8230; keeping the work within the one window, that would be good, yes?  Happily, yes is the go, and with little bother too, with referencing code structure like &#8230;<\/p>\n<p><code><br \/>\n function feedoff(intr, compduris, comptitleis) {<br \/>\n    var iqw=0;<br \/>\n  if (window.parent != window.self) {<br \/>\n            if (window.parent.window.opener) {<br \/>\n              \/\/alert('vHere ' + ivid);<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n              \/\/alert('Here ' + ivid);<br \/>\n              window.parent.window.opener.nonytopen(ivid, compduris, comptitleis);<br \/>\n            } else {<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n              \/\/alert('gere ' + ivid);<br \/>\n              parent.nonytopen(ivid, compduris, comptitleis);<br \/>\n            }<br \/>\n   \/\/} else {<br \/>\n   \/\/  alert('therE');<br \/>\n   }<br \/>\n   return intr;<br \/>\n }<br \/>\n <br \/>\n function localended(avo) {<br \/>\n   var iqw=0;<br \/>\n   if (window.parent) {<br \/>\n     if (parent.document.URL.indexOf('tbox=') != -1) {<br \/>\n            if (window.parent.window.opener) {<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n              setTimeout(function() {  parent.window.opener.document.getElementById('j' + parent.document.URL.split('tbox=')[1].split('&')[0]).value='' + Math.ceil(eval('' + contdurs[whichnonyt(eval(-1 + contstarts.length))])) + '.00'; parent.document.getElementById('mytopspan').innerHTML='You can close me now ... ' + parent.document.getElementById('mytopspan').innerHTML; parent.window.opener.focus(); parent.window.opener.backtobase(); parent.window.opener.focus(); duration=-1; aminytnon=false; player=altplayer;  }, 1000);<br \/>\n        <br \/>\n              \/\/window.close();<br \/>\n            }<br \/>\n     } else if (parent.document.URL.indexOf('\/karaoke_youtube_api.htm') != -1) {<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n       if (('' + parent.document.URL + 's').replace(\/\\#https\/g,'') != ('' + parent.document.URL + 's')) {<br \/>\n         aminytnon=false;<br \/>\n         player=altplayer;<br \/>\n         duration=-9999;<br \/>\n         playingvideo(); \/\/setTimeout(playingvideo, 800);<br \/>\n       }<br \/>\n     } else if ('blog' != 'blog') {<br \/>\n       parent.document.title='Finished ' + avo.outerHTML.substring(1).split(' ')[0];<br \/>\n     }<br \/>\n   }<br \/>\n <br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; essentially unaffected by the pretty dramatic change of window usage configuration.   Cute, huh?!  But how is this made to happen?  It&#8217;s really simple, really, as the second parameter of window.open can point to an iframe name attribute &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe name=radioif id=radioif data-laterclick=\"\" data-position=relative data-top=0 data-left=0 data-width=0 data-height=0 data-z=-999 style=display:none; src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then we can wrap <a target=\"_blank\" title='Window.open method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' rel=\"noopener\">window.open<\/a> calls, in amongst very <a target=\"_blank\" title='Overlay blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' rel=\"noopener\">&#8220;overlay&#8221;<\/a> minded Javascript code, into our new inhouse &#8220;function windowopen&#8221; &#8230;<\/p>\n<p><code><br \/>\nfunction windowopen(w1,w2,w3) {<br \/>\n  if (('' + document.getElementById('radioif').getAttribute('data-height')) == '0') {<br \/>\n   document.getElementById('radioif').setAttribute('data-height', '' + document.getElementById('tablenmup').getBoundingClientRect().top);<br \/>\n   document.getElementById('radioif').setAttribute('data-width', '' + screen.width);<br \/>\n   document.getElementById('radioif').setAttribute('data-top', '' + document.getElementById('tablenmup').getBoundingClientRect().top);<br \/>\n  }<br \/>\n  if (document.getElementById('xx' + nextwoin).outerHTML.indexOf('green') != -1) {<br \/>\n  document.getElementById('radioif').style.position='absolute';<br \/>\n  document.getElementById('radioif').style.top='0px';<br \/>\n  document.getElementById('radioif').style.left='0px';<br \/>\n  document.getElementById('radioif').style.width='' + document.getElementById('radioif').getAttribute('data-width') + 'px';<br \/>\n  document.getElementById('radioif').style.height='' + document.getElementById('radioif').getAttribute('data-height') + 'px';<br \/>\n  document.getElementById('radioif').style.zIndex='999';<br \/>\n  document.getElementById('radioif').style.display='block';<br \/>\n  } else {<br \/>\n  document.getElementById('radioif').style.zIndex='-999';<br \/>\n  document.getElementById('radioif').style.display='none';<br \/>\n  lastw1=w1;<br \/>\n  lastw2=w2;<br \/>\n  lastw3=w3;<br \/>\n  lastnextwoin=nextwoin;<br \/>\n  }<br \/>\n  if (w1.indexOf('&rand=') != -1) {<br \/>\n    w1=w1.replace('&rand=', '&rand=' + Math.floor(Math.random() * 9));<br \/>\n  } else if (w1.indexOf('#') != -1) {<br \/>\n    w1=w1.replace('#', '&rand=' + Math.floor(Math.random() * 129) + '#');<br \/>\n  }<br \/>\n  if (w1.indexOf('&tbox=') != -1) {<br \/>\n    w1=w1.replace('&tbox=' + w1.split('&tbox=')[1].split('&')[0].split('#')[0], '&tbox=' + nextwoin);<br \/>\n  } else if (w1.indexOf('&') != -1) {<br \/>\n    w1=w1.replace('&', '&tbox=' + nextwoin + '&');<br \/>\n  }<br \/>\n  if (nextwo) {<br \/>\n    if (!nextwo.closed) {<br \/>\n      nextwo.close();<br \/>\n      nextwo=null;<br \/>\n    }<br \/>\n  }<br \/>\n  return window.open(w1,\"radioif\");<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; happening in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in &#8220;Radio Play&#8221; mode.<\/p>\n<p>And then there was &#8220;what we noted as a to do&#8221; as &#8230;<\/p>\n<blockquote><p>\nmake click on checkbox after textbox entry work\n<\/p><\/blockquote>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in &#8220;Radio Play&#8221; mode.<\/p>\n<p>And so, for the rest of the day, more progress, but still not there with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a> &#8230; supervised by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in &#8220;Radio Play&#8221; mode<\/li>\n<\/ul>\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\/youtube-api-caller-other-media-phase-two-ifame-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Phase Two Iframe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomptit'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Phase Two Interfacing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-phase-two-interfacing-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Phase Two Interfacing 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\/karaoke_youtube_api.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Phase Two Interfacing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_to_do.gif\" title=\"YouTube API Caller Other Media Phase Two Interfacing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Phase Two Interfacing Tutorial<\/p><\/div>\n<p>Onto the recent <a title='YouTube API Caller Other Media Interfacing Tutorial' href='#ytapicomit'>YouTube API Caller Other Media Interfacing Tutorial<\/a> we found that &#8230;<\/p>\n<ul>\n<li>isolation interfacing as in our first designated phase 1 &#8230; is a doddle compared to when &#8230;<\/li>\n<li>interfacing among a number of players in this (what pans out to be day one of) phase 2<\/li>\n<\/ul>\n<p> &#8230; making it work in with the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">supervisor of YouTube API &#8220;inhouse&#8221; web application<\/a>, and all it&#8217;s usage incarnations.  We did not expect otherwise. but naturally hoped for the miracle of it all happening in a day.<\/p>\n<p>Never mind &#8230; but what can we say about phase 2 we got &#8220;contained&#8221; today.  It&#8217;s, to our mind &#8230;<\/p>\n<ul>\n<li>start up <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">supervisor of YouTube API &#8220;inhouse&#8221; web application in &#8220;Radio Play&#8221; simulated mode<\/a> (ie. #http hashtag) &#8230;<\/li>\n<li>enter in an 11 character YouTube ID (eg.<br \/>\n<blockquote><p>\n0Gz_7am23rk\n<\/p><\/blockquote>\n<p>) and tab out &#8230;<\/li>\n<li>click first left hand checkbox &#8230;<\/li>\n<li>in the textbox to the right enter a media URL <font size=1>(we&#8217;ve been doing)<\/font> like &#8230;<br \/>\n<blockquote><p>\n\/Mac\/iPad\/slide1.m4a\n<\/p><\/blockquote>\n<p> &#8230; (and we are not ready for data URIs yet) &#8230; and tab out &#8230;\n<\/li>\n<li><sup>at this stage, so far<\/sup> a new popup window opens<\/li>\n<li>non YouTube media plays on non-mobile starting muted &#8230; and at the end of it&#8217;s play &#8230;<\/li>\n<li>the user can close popup to return to original  supervisor of YouTube API &#8220;inhouse&#8221; web application incarnation<\/li>\n<\/ul>\n<p>Further along, but not there yet, with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller &#8230; supervised by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a><\/li>\n<\/ul>\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\/new-youtube-api-caller-other-media-interfacing-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Interfacing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomit'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Interfacing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-interfacing-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Interfacing 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\/stop_start_youtube.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Interfacing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube_nonyt.jpg\" title=\"YouTube API Caller Other Media Interfacing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Interfacing Tutorial<\/p><\/div>\n<p>Today&#8217;s work is the result of a &#8220;generic push&#8221; by us to improve on attempts in the past to use our inhouse <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video playing interfacing suite of web applications to mix &#8230;<\/p>\n<ul>\n<li>YouTube video media content &#8230; interspersed with &#8230;<\/li>\n<li>non YouTube media content<\/li>\n<\/ul>\n<p> &#8230; when we presented <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio-video-youtube-shuffle-tutorial\/' title='Spliced Audio\/Video YouTube Shuffle Tutorial' rel=\"noopener\">Spliced Audio\/Video YouTube Shuffle Tutorial<\/a> blog posting thread.  We better like this &#8220;generic push&#8221; idea of adapting our inhouse <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> interfacing web application to process both types of media input categories and be handled just within it&#8217;s remit, if there are non YouTube media items, within a (newly nesting) &#8230;<\/p>\n<ul>\n<li>table element &#8230; with &#8230;<\/li>\n<li>left hand cell handling YouTube video media content presented via YouTube API&#8217;s iframe element approach &#8230; and the &#8230;<\/li>\n<li>right hand cell handling non YouTube video media content presented via video or audio or img or iframe element depending on the data mimetype &#8230;<\/li>\n<\/ul>\n<p> &#8230; and it is our inhouse YouTube API interfacing web application&#8217;s job to toggle between CSS <i>display:none;<\/i> and <i>display:table-cell;<\/i> for these two cells appropriately.<\/p>\n<p>This work we see as a two part mini-project where &#8230;<\/p>\n<ol>\n<li>today&#8217;s phase 1 work isolates that inhouse YouTube API interfacing web application and asks it to handle new hashtag based data arguments coming in to demonstrate it, in that isolation, works both for the new paradigm and any previous scenarios &#8230; and then &#8230;<\/li>\n<li>after today we start phase 2 work interfacings, where we will rejoin the blog posting thread of yesterday&#8217;s <a target=\"_blank\" title='Tabular Single Row Emoji Sharing Menu Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tabular-single-row-emoji-sharing-menu-tutorial\/' rel=\"noopener\">Tabular Single Row Emoji Sharing Menu Tutorial<\/a> and allow for the smarter inhouse YouTube API interfacing web application to be relatively seamless changing between YouTube and non YouTube media playing should a user enter a data URI, for example, in one of those textboxes to the right of the checkboxes<\/li>\n<\/ol>\n<p> &#8230; for <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a>.<\/p>\n<p>Here is a non YouTube video example &#8230;<\/p>\n<p><iframe style='width:100%;height:600px;zoom:0.8;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=cannotenda2%23%20My%20Video%20Example%20%2Fschool_activities_vd.mp4'><\/iframe><\/p>\n<p> &#8230; and here is a <a target=\"_blank\" title='New window' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=0Gz_7am23rk' rel=\"noopener\">YouTube example<\/a> &#8230;<\/p>\n<div style=\"width:600px;height:900px;overflow:auto;-webkit-overflow-scrolling:touch;\">\n<iframe style='width:100%;height:900px;zoom:0.5;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=0Gz_7am23rk'><\/iframe>\n<\/div>\n<p> &#8230; and here is a non YouTube audio example &#8230;<\/p>\n<p><iframe style='width:100%;height:250px;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=cannotenda2%23%20My%20Audio%20Example%20%2FMac%2FiPad%2Fslide4.m4a'><\/iframe><\/p>\n<p> &#8230; and here is a non YouTube animated GIF example &#8230;<\/p>\n<p><iframe style='width:100%;height:2100px;zoom:0.2;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=cannotenda2%23%20My%20Animated%20GIF%20Example%20%2Fbubble_sort.gif'><\/iframe><\/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='#d69552' onclick='var dv=document.getElementById(\"d69552\"); 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='d69552' 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='#d69600' onclick='var dv=document.getElementById(\"d69600\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/popup\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69600' 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='#d70031' onclick='var dv=document.getElementById(\"d70031\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/external-Javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d70031' 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='#d69626' onclick='var dv=document.getElementById(\"d69626\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/playlist\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69626' 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='#d69632' onclick='var dv=document.getElementById(\"d69632\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/recall\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69632' 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='#d69642' onclick='var dv=document.getElementById(\"d69642\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/compilation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69642' 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='#d69650' onclick='var dv=document.getElementById(\"d69650\"); 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='d69650' 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='#d69658' onclick='var dv=document.getElementById(\"d69658\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mimetype\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69658' 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='#d69672' onclick='var dv=document.getElementById(\"d69672\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmousedown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69672' 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='#d69684' onclick='var dv=document.getElementById(\"d69684\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69684' 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='#d69689' onclick='var dv=document.getElementById(\"d69689\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/link\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69689' 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='#d69695' onclick='var dv=document.getElementById(\"d69695\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cursor\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69695' 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='#d69702' onclick='var dv=document.getElementById(\"d69702\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/conditional\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69702' 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='#d69728' onclick='var dv=document.getElementById(\"d69728\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/oncontextmenu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69728' 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='#d69732' onclick='var dv=document.getElementById(\"d69732\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/data-uri\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69732' 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='#d69739' onclick='var dv=document.getElementById(\"d69739\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textbox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69739' 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='#d69749' onclick='var dv=document.getElementById(\"d69749\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/breadcrumbs\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69749' 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='#d69760' onclick='var dv=document.getElementById(\"d69760\"); 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='d69760' 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='#d69766' onclick='var dv=document.getElementById(\"d69766\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69766' 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='#d69766' onclick='var dv=document.getElementById(\"d69766\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69766' 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='#d70013' onclick='var dv=document.getElementById(\"d70013\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d70013' 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='#d70013' onclick='var dv=document.getElementById(\"d70013\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d70013' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Regarding yesterday&#8217;s YouTube API Caller Subsequent Post Winding Up For Now Tutorial &#8230; Yes, now clicks on it&#8217;s &#8220;conjoin&#8221; links cause a contextually helping and relevant thumbnail image to appear adjacent to that relevant &#8220;a&#8221; element, and now navigates to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-youtube-api-caller-subsequent-post-winding-up-for-now-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":[12,14,37],"tags":[52,5275,83,84,88,1885,103,113,1703,177,181,1580,210,4191,5281,5279,2335,253,5278,257,281,2127,1654,305,307,2380,2310,327,341,1816,354,359,2091,1549,380,5287,400,409,5292,520,557,3961,2761,576,587,590,599,4063,614,617,3695,652,5280,1807,705,2415,2205,3870,3337,760,2732,1616,802,830,2010,3987,1919,3267,2723,875,884,2076,894,932,950,2362,1898,967,997,1915,3274,1063,5293,1069,1126,1133,1168,1173,2311,1238,1581,1254,5276,1675,5277,1273,1282,2167,3325,1319,1324,1325,1345,1891,3575,1369,2485,1404,2099,1425,1456,1493,2017],"class_list":["post-70031","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute-url","tag-after","tag-animated-gif","tag-animation-2","tag-api","tag-argument","tag-array","tag-audio","tag-breadcrumbs","tag-cache","tag-call","tag-cell","tag-class","tag-compilation","tag-completion","tag-condition","tag-conditional","tag-console","tag-console-warn","tag-content","tag-css","tag-cursor","tag-data-uri","tag-debug","tag-debugging","tag-delay","tag-details","tag-did-you-know","tag-display","tag-document-title","tag-dom","tag-double-click","tag-duration","tag-element","tag-email","tag-error-414","tag-event","tag-external-javascript","tag-external-javascript-tool","tag-google-chrome","tag-hashtag","tag-hashtagging","tag-header-php","tag-html","tag-iframe","tag-image","tag-img","tag-instance","tag-integration","tag-interactive","tag-interfacing","tag-javascript","tag-jump","tag-link","tag-links","tag-localstorage","tag-loop","tag-looping","tag-making-of","tag-media","tag-mimetype","tag-modularization","tag-module","tag-navigation","tag-object-oriented-programming","tag-oncontextmenu","tag-onmousedown","tag-ontouchdown","tag-ontouchmove","tag-oop","tag-opera","tag-order","tag-overlay","tag-php","tag-platform","tag-play","tag-playlist","tag-popup","tag-programming","tag-progress","tag-recall","tag-reveal","tag-revela","tag-right-click","tag-settimeout","tag-share","tag-software-integration","tag-sort","tag-summary","tag-table","tag-table-cell","tag-text","tag-text-cursor","tag-textbox","tag-textual-cursor","tag-thumbnail","tag-timer","tag-title","tag-toggle","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-url","tag-user","tag-user-input","tag-video","tag-visibility","tag-web-browser","tag-web-inspector","tag-whitespace","tag-wordpress","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70031"}],"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=70031"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70031\/revisions"}],"predecessor-version":[{"id":70045,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/70031\/revisions\/70045"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=70031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=70031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=70031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}