{"id":66365,"date":"2025-01-04T03:01:00","date_gmt":"2025-01-03T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66365"},"modified":"2025-01-04T07:05:30","modified_gmt":"2025-01-03T21:05:30","slug":"youtube-video-api-event-radio-play-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-radio-play-sharing-tutorial\/","title":{"rendered":"YouTube Video API Event Radio Play Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Video API Event Radio Play Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_mute_share.jpg\" title=\"YouTube Video API Event Radio Play Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Radio Play Sharing Tutorial<\/p><\/div>\n<p>Wishful thinking with today&#8217;s tasklist regarding our current <a title='YouTube Video API Event Radio Play Idea Tutorial' href='#ytvapierpit'>YouTube Video API Event Radio Play Idea Tutorial<\/a> <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 project, where the <font color=blue>blue<\/font> ideas were started &#8230;<\/p>\n<blockquote><p>\n<font color=blue>st*_st* way to set mute straight away via $_GET[&#8216;mute&#8217;] and\/or blanks in duration get and a hashtag way to temporarily mute<\/font><br \/>\nSave a playlist for later via window.localStorage<br \/>\n<font color=blue>Share a playlist<\/font><br \/>\n<font color=blue>Radio and Oneatatime with a straight hashtag URL<br \/>\nMute and unmute dynamically<br \/>\nTurn &#8220;-&#8221; into a reset link<\/font><br \/>\nAmalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)\n<\/p><\/blockquote>\n<p> &#8230; further to yesterday&#8217;s <a title='YouTube Video API Event Radio Play Idea Tutorial' href='#ytvapierpit'>YouTube Video API Event Radio Play Idea Tutorial<\/a> &#8230;<\/p>\n<p>And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API <font size=1>(their)<\/font> playlists &#8230; no guarantees, as you&#8217;d imagine!<\/p>\n<p>Of interest, here, might be the &#8220;emoji means&#8221; and top.document.title means by which we tackle the <font color=blue>Mute and unmute dynamically<\/font> issue.  Why use top.document.title here?   Well, a grandchild of the grandparent is best placed to &#8230;<\/p>\n<ul>\n<li>tell the grandparent the non-muted volume (which seems to always be 100, as you control what 100 means with the actual volume you have for your speakers) &#8230; as well as &#8230;<\/li>\n<li>obey a grandparent edict to either &#8230;\n<ol>\n<li>mute<\/li>\n<li>unmute<\/li>\n<\/ol>\n<p> &#8230; the volume as our way to say &#8220;keep playing the radio but shush while I take this phone call&#8221; in certain scenarios that might happen<\/li>\n<\/ul>\n<p> &#8230; meaning that all the grandparent has to do, effectively &#8220;broadcasting&#8221; to any &#8220;grandchildren YouTube video players&#8221;, is &#8220;the emoji flagging work&#8221; and adjusting <font size=1>(what it knows as)<\/font> document.title to perform this functionality for the two new input type=checkboxes <font size=1>(appended by an empty span element and nested in a span id=smute element)<\/font> we add into the HTML design mix via <i>onchange<\/i> event function Javascript &#8230;<\/p>\n<p><code><br \/>\n function domute(thiscbo) {<br \/>\n   if (thiscbo.checked) {<br \/>\n     thiscbo.style.backgroundColor='yellow';<br \/>\n     document.getElementById('cbunmute').style.backgroundColor='white';<br \/>\n     document.getElementById('smute').innerHTML=document.getElementById('smute').innerHTML.replace('&gt;Mute' + document.getElementById('smute').innerHTML.split('&gt;Mute')[1].split('&lt;')[0] + '&lt;', '&gt;Mute ' + '&amp;#10004;&lt;').replace('&gt;Unmute' + document.getElementById('smute').innerHTML.split('&gt;Unmute')[1].split('&lt;')[0] + '&lt;', '&gt;Unmute&lt;');<br \/>\n     if (document.title.indexOf('volume:') != -1) {<br \/>\n        var rest='volume:' + document.title.split('volume:')[1];<br \/>\n        document.title=document.title.replace(rest, rest.replace(document.title.split('volume:')[1].toLowerCase().replace(\/^\\ \/g,'').replace(\/^\\ \/g,'').replace(\/^\\ \/g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'mute'));<br \/>\n     } else {<br \/>\n        thiscbo.style.backgroundColor='white';<br \/>\n        document.title+=' volume:mute';<br \/>\n     }<br \/>\n     thiscbo.checked=false;<br \/>\n   }<br \/>\n }<br \/>\n <br \/>\n function dounmute(thiscbo) {<br \/>\n    if (thiscbo.checked) {<br \/>\n     thiscbo.style.backgroundColor='yellow';<br \/>\n     document.getElementById('cbmute').style.backgroundColor='white';<br \/>\n     document.getElementById('smute').innerHTML=document.getElementById('smute').innerHTML.replace('&gt;Unmute' + document.getElementById('smute').innerHTML.split('&gt;Unmute')[1].split('&lt;')[0] + '&lt;', '&gt;Unmute ' + '&amp;#10004;&lt;').replace('&gt;Mute' + document.getElementById('smute').innerHTML.split('&gt;Mute')[1].split('&lt;')[0] + '&lt;', '&gt;Mute&lt;');<br \/>\n     if (document.title.indexOf('volume:') != -1) {<br \/>\n        var rest='volume:' + document.title.split('volume:')[1];<br \/>\n        document.title=document.title.replace(rest, rest.replace(document.title.split('volume:')[1].toLowerCase().replace(\/^\\ \/g,'').replace(\/^\\ \/g,'').replace(\/^\\ \/g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'unmute'));<br \/>\n     } else {<br \/>\n        thiscbo.style.backgroundColor='white';<br \/>\n        document.title+=' volume:unmute';<br \/>\n     }<br \/>\n     thiscbo.checked=false;<br \/>\n   }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>It is this complex because <font size=1>(we found out)<\/font> input type=checkbox CSS styling, as a subject, is a &#8220;bit of a closed book&#8221; matter!<\/p>\n<p>Codewise, also regarding email and SMS <font size=1>(radio)<\/font> playlist sharing functionality, amongst other changes, involved &#8230;<\/p>\n<ul>\n<li>grandparent &#8230; <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\">tweaked<\/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=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\">YouTube API Interfacing web application<\/a> <font size=1>(you can try out for yourself <a href='#radioif' title='Try below'>here<\/a>)<\/font> &#8230; calls on &#8230;<\/li>\n<li>parents &#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\">tweaked<\/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; helped out by &#8230;<\/li>\n<li>grandchildren &#8230; <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\">tweaked<\/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\/new-youtube-video-api-event-radio-play-idea-tutorial\/' rel=\"noopener\">New YouTube Video API Event Radio Play Idea Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='ytvapierpit'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Radio Play Idea Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-radio-play-idea-tutorial\/' rel=\"noopener\">YouTube Video API Event Radio Play Idea Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"YouTube Video API Event Radio Play Idea Tutorial\"]<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Video API Event Radio Play Idea Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_radio.png\" title=\"YouTube Video API Event Radio Play Idea Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>The transistor radio is still out there and useful.  Some radio stations still play continuous music for long periods of time, and, today ...\n\n\n\n<ul>\n\n\n<li>for non-mobile platforms ... we now offer the chance to ...<\/li>\n\n\n\n\n<li>design a looping personal playlist ... with <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\">our latest<\/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=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\">YouTube API Interfacing web application<\/a> <font size=1>(you can try out for yourself <a href='#radioif' title='Try below'>here<\/a>)<\/font> (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\">a tweaked<\/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\n\n<\/ul>\n\n\n\n\n\n<p> ... that loops through that playlist hundreds of times, as needed, for the user.<\/p>\n\n\n\n\n\n<p>It's likely, as a user of this web application, you'd want to add your own YouTube video interests ahead of setting any ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>Radio ... or ...<\/li>\n\n\n\n\n<li>One at a Time<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... modes of use we turn on event.stopPropagation() for.<\/p>\n\n\n\n\n\n<blockquote>\nWhy not do this for mobile?\n<\/blockquote>\n\n\n\n\n\n<p>The mobile platform adage \"Play only occurs after a real user tap\" makes the whole idea above too simplistic, at least for now, in our thinking ...<\/p>\n\n\n\n<code>\n  function lhfind() {\n    var prevdelay=0, detbit='', karbit='', ijk=0, iijk=0, kji=0, randis=Math.floor(Math.random() * 1987865);\n    var lhparts=[], nextclose='', randiss=[randis], jjkk=0;\n    var detidtoclick='';\n    if (mode != '' && mode == mode.trim()) {\n      if (('' + location.hash).replace(\/^\\#\/g,'').indexOf('#') != -1) {\n         mode+=' ';\n         lhparts=('' + location.hash).replace(\/^\\#\/g,'').split('#');\n         switch (lhparts[0].toLowerCase()) {\n           case 'radio':\n             radioscr='';\n         \/\/document.title='' + (lhparts.length);\n         \/\/alert(lhparts.length);\n             for (ijk=1; ijk&lt;lhparts.length; ijk+=3) { \n               if (lhparts[eval(2 + ijk)].trim() == '') { lhparts[eval(2 + ijk)]=lhparts[eval(0 + ijk)];  }  \n               if (detidtoclick == '') {\n                 detidtoclick='detbtobnine' + randis; \n                 \/\/issueoid.push('ifbtobnine' + randis);\n                 radioscr=\" document.getElementById(preregit('\" + detidtoclick + \"')).setAttribute('open',true); document.getElementById('\" + detidtoclick.replace('det','if') + \"').src= document.getElementById(regit('\" + detidtoclick.replace('det','if') + \"')).src.replace('c0=off','c0=on');  document.getElementById('\" + detidtoclick.replace('det','if') + \"').click(); \"; \n                 nextclose=\" document.getElementById('\" + detidtoclick + \"').setAttribute('open', false); document.getElementById('\" + detidtoclick + \"').open=false;  \"; \n                 prevdelay+=Math.round(eval(1000 * eval('' + lhparts[eval(1 + ijk)])));  \n               } else {\n                 \/\/issueoid.push('ifbtobnine' + randis);\n                 radioscr+=\"  setTimeout(function(){ \" + nextclose + \" document.getElementById(preregit('\" + 'detbtobnine' + randis + \"')).setAttribute('open',true); document.getElementById('\" + 'ifbtobnine' + randis + \"').src=document.getElementById(regit('\" + 'ifbtobnine' + randis + \"')).src.replace('c0=off','c0=on'); document.getElementById('\" + 'ifbtobnine' + randis + \"').click(); }, \" + prevdelay + \");  \"; \n                 nextclose=\" document.getElementById('\" + 'detbtobnine' + randis + \"').setAttribute('open', false);  document.getElementById('\" + 'detbtobnine' + randis + \"').open=false;  \"; \n                 prevdelay+=Math.round(eval(1000 * eval('' + lhparts[eval(1 + ijk)]))); \n                 if (eval(3 + ijk) &gt;= eval('' + lhparts.length)) {\n                   for (kji=0; kji&lt;200; kji++) {\n                    jjkk=0;\n                    for (iijk=1; iijk&lt;lhparts.length; iijk+=3) {   \n                 radioscr+=\"  setTimeout(function(){ \" + nextclose + \" document.getElementById(preregit('\" + 'detbtobnine' + randiss[eval(0 + jjkk)] + \"')).setAttribute('open',true);  document.getElementById('\" + 'ifbtobnine' + randiss[eval(0 + jjkk)] + \"').src=document.getElementById(regit('\" + 'ifbtobnine' + randiss[eval(0 + jjkk)] + \"')).src.replace('c0=off','c0=on');   document.getElementById('\" + 'ifbtobnine' + randiss[eval(0 + jjkk)] + \"').click(); }, \" + prevdelay + \");  \"; \n                 nextclose=\" document.getElementById('\" + 'detbtobnine' + randiss[eval(0 + jjkk)] + \"').setAttribute('open', false);  \"; \n                 prevdelay+=Math.round(eval(1000 * eval('' + lhparts[eval(1 + iijk)]))); \n                    jjkk++;\n                    }\n                   }\n                 } \n               } \n               if (detbit == ' ') {\n               detbit+='&lt;details onclick=\"document.getElementById(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ').src=document.getElementById(regit(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ')).src.replace(' + String.fromCharCode(39) + 'c0=off' + String.fromCharCode(39) + ',' + String.fromCharCode(39) + 'c0=on' + String.fromCharCode(39) + '); \" id=detbtobnine' + randis + '&gt;&lt;summary id=sumbtobnine' + randis + '&gt;&lt;font size=2&gt;' + decodeURIComponent(decodeURIComponent(lhparts[eval(2 + ijk)])) + '&lt;\/font&gt;&lt;\/summary&gt;&lt;p&gt;&lt;iframe onclick=\"event.stopPropagation();\" style=\"width:100%;height:900px;\" id=\"ifbtobnine' + randis + '\" onload=\" cif(this); if (top.document.URL.indexOf(' + String.fromCharCode(39) + 'showit=' + String.fromCharCode(39) + ') != -1) { document.getElementById(' + String.fromCharCode(39) + 'divsp' + String.fromCharCode(39) + ').style.display=' + String.fromCharCode(39) + 'block' + String.fromCharCode(39) + '; } \" src=\"\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + lhparts[eval(0 + ijk)] + '&youtube_duration=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '.000&email=&email=&emoji=on&c0=on&i0=0&j0=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\"&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;\/p&gt;&lt;\/details&gt;';\n               } else {          \n               detbit+='&lt;details onclick=\"document.getElementById(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ').src=document.getElementById(regit(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ')).src.replace(' + String.fromCharCode(39) + 'c0=off' + String.fromCharCode(39) + ',' + String.fromCharCode(39) + 'c0=on' + String.fromCharCode(39) + '); \" id=detbtobnine' + randis + '&gt;&lt;summary id=sumbtobnine' + randis + '&gt;&lt;font size=2&gt;' + decodeURIComponent(decodeURIComponent(lhparts[eval(2 + ijk)])) + '&lt;\/font&gt;&lt;\/summary&gt;&lt;p&gt;&lt;iframe onclick=\"event.stopPropagation();\" style=\"width:100%;height:900px;\" id=\"ifbtobnine' + randis + '\" onload=\" cif(this); if (top.document.URL.indexOf(' + String.fromCharCode(39) + 'showit=' + String.fromCharCode(39) + ') != -1) { document.getElementById(' + String.fromCharCode(39) + 'divsp' + String.fromCharCode(39) + ').style.display=' + String.fromCharCode(39) + 'block' + String.fromCharCode(39) + '; } \" src=\"\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + lhparts[eval(0 + ijk)] + '&youtube_duration=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '.000&email=&email=&emoji=on&c0=off&i0=0&j0=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\"&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;\/p&gt;&lt;\/details&gt;';\n               }\n               karbit=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 1987865));\n               randis=Math.floor(Math.random() * 1987865);\n               randiss.push(randis);\n             }\n             break;\n<br \/>             \n           case 'oneatatime':\n             radioscr='';\n         \/\/document.title='' + (lhparts.length);\n         \/\/alert(lhparts.length);\n             for (ijk=1; ijk&lt;lhparts.length; ijk+=3) { \n               if (lhparts[eval(2 + ijk)].trim() == '') { lhparts[eval(2 + ijk)]=lhparts[eval(0 + ijk)];  }  \n               if (detidtoclick == '') {\n                 detidtoclick='detbtobnine' + randis; \n                 \/\/issueoid.push('ifbtobnine' + randis);\n                 radioscr=\" document.getElementById(preregit('\" + detidtoclick + \"')).setAttribute('open',true); document.getElementById('\" + detidtoclick.replace('det','if') + \"').src= document.getElementById(regit('\" + detidtoclick.replace('det','if') + \"')).src.replace('c0=off','c0=on');  document.getElementById('\" + detidtoclick.replace('det','if') + \"').click(); \"; \n                 nextclose=\" document.getElementById('\" + detidtoclick + \"').setAttribute('open', false); document.getElementById('\" + detidtoclick + \"').open=false;  \"; \n                 prevdelay+=Math.round(eval(1000 * eval('' + lhparts[eval(1 + ijk)])));  \n               } else {\n                 \/\/issueoid.push('ifbtobnine' + randis);\n                 radioscr+=\"  setTimeout(function(){ \" + nextclose + \" document.getElementById(preregit('\" + 'detbtobnine' + randis + \"')).setAttribute('open',true); document.getElementById('\" + 'ifbtobnine' + randis + \"').src=document.getElementById(regit('\" + 'ifbtobnine' + randis + \"')).src.replace('c0=off','c0=on'); document.getElementById('\" + 'ifbtobnine' + randis + \"').click(); }, \" + prevdelay + \");  \"; \n                 nextclose=\" document.getElementById('\" + 'detbtobnine' + randis + \"').setAttribute('open', false);  document.getElementById('\" + 'detbtobnine' + randis + \"').open=false;  \"; \n                 prevdelay+=Math.round(eval(1000 * eval('' + lhparts[eval(1 + ijk)]))); \n                 if (eval(3 + ijk) &gt;= eval('' + lhparts.length)) {\n                   for (kji=0; kji&lt;200; kji++) {\n                    jjkk=0;\n                    for (iijk=1; iijk&lt;lhparts.length; iijk+=3) {   \n                 radioscr+=\"  setTimeout(function(){ \" + nextclose + \" document.getElementById(preregit('\" + 'detbtobnine' + randiss[eval(0 + jjkk)] + \"')).setAttribute('open',true);  document.getElementById('\" + 'ifbtobnine' + randiss[eval(0 + jjkk)] + \"').src=document.getElementById(regit('\" + 'ifbtobnine' + randiss[eval(0 + jjkk)] + \"')).src.replace('c0=off','c0=on');   document.getElementById('\" + 'ifbtobnine' + randiss[eval(0 + jjkk)] + \"').click(); }, \" + prevdelay + \");  \"; \n                 nextclose=\" document.getElementById('\" + 'detbtobnine' + randiss[eval(0 + jjkk)] + \"').setAttribute('open', false);  \"; \n                 prevdelay+=Math.round(eval(1000 * eval('' + lhparts[eval(1 + iijk)]))); \n                    jjkk++;\n                    }\n                   }\n                 } \n               } \n               if (detbit == ' ') {\n               detbit+='&lt;details onclick=\"document.getElementById(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ').src=document.getElementById(regit(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ')).src.replace(' + String.fromCharCode(39) + 'c0=off' + String.fromCharCode(39) + ',' + String.fromCharCode(39) + 'c0=on' + String.fromCharCode(39) + '); \" id=detbtobnine' + randis + '&gt;&lt;summary id=sumbtobnine' + randis + '&gt;&lt;font size=2&gt;' + decodeURIComponent(decodeURIComponent(lhparts[eval(2 + ijk)])) + '&lt;\/font&gt;&lt;\/summary&gt;&lt;p&gt;&lt;iframe onclick=\"event.stopPropagation();\" style=\"width:100%;height:900px;\" id=\"ifbtobnine' + randis + '\" onload=\" cif(this); if (top.document.URL.indexOf(' + String.fromCharCode(39) + 'showit=' + String.fromCharCode(39) + ') != -1) { document.getElementById(' + String.fromCharCode(39) + 'divsp' + String.fromCharCode(39) + ').style.display=' + String.fromCharCode(39) + 'block' + String.fromCharCode(39) + '; } \" src=\"\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + lhparts[eval(0 + ijk)] + '&youtube_duration=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '.000&email=&email=&emoji=on&c0=on&i0=0&j0=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\"&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;\/p&gt;&lt;\/details&gt;';\n               } else {          \n               detbit+='&lt;details onclick=\"document.getElementById(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ').src=document.getElementById(regit(' + String.fromCharCode(39) + 'ifbtobnine' + randis + String.fromCharCode(39) + ')).src.replace(' + String.fromCharCode(39) + 'c0=off' + String.fromCharCode(39) + ',' + String.fromCharCode(39) + 'c0=on' + String.fromCharCode(39) + '); \" id=detbtobnine' + randis + '&gt;&lt;summary id=sumbtobnine' + randis + '&gt;&lt;font size=2&gt;' + decodeURIComponent(decodeURIComponent(lhparts[eval(2 + ijk)])) + '&lt;\/font&gt;&lt;\/summary&gt;&lt;p&gt;&lt;iframe onclick=\"event.stopPropagation();\" style=\"width:100%;height:900px;\" id=\"ifbtobnine' + randis + '\" onload=\" cif(this); if (top.document.URL.indexOf(' + String.fromCharCode(39) + 'showit=' + String.fromCharCode(39) + ') != -1) { document.getElementById(' + String.fromCharCode(39) + 'divsp' + String.fromCharCode(39) + ').style.display=' + String.fromCharCode(39) + 'block' + String.fromCharCode(39) + '; } \" src=\"\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=' + lhparts[eval(0 + ijk)] + '&youtube_duration=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '.000&email=&email=&emoji=on&c0=off&i0=0&j0=' + ('' + lhparts[eval(1 + ijk)]).split('.')[0] + '&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\"&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;\/p&gt;&lt;\/details&gt;';\n               }\n               karbit=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 1987865));\n               randis=Math.floor(Math.random() * 1987865);\n               randiss.push(randis);\n             }\n             break;\n <br \/>            \n           default:\n             break;\n         }\n     <br \/>    \n         if (detbit != '') {\n          document.getElementById('predivsp').innerHTML='';\n          document.getElementById('postdivsp').innerHTML=detbit; \n          if (karbit != '') { document.getElementById('karit').src=karbit; } \/\/document.getElementById('karit').src.split('rand=')[0] + 'rand=' + Math.floor(Math.random() * 1987865);\n          document.getElementById('tacode').value=document.getElementById('divsp').outerHTML;\n          setTimeout(function(){ lastta=document.getElementById('tacode').value; }, 2000);\n          if (radioscr != '') {\n          \/\/var xx=prompt(radioscr,radioscr);\n             setTimeout(function(){ eval('' + radioscr);  }, 1000);\n          }\n         }\n      }\n    }\n  }\n<\/code>\n\n\n\n<p> ... further to yesterday's <a title='YouTube Video API Event Stop Propagation Idea Tutorial' href='#ytvapiespit'>YouTube Video API Event Stop Propagation Idea Tutorial<\/a>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_radio.jpg\" rel=\"noopener\"><\/img>\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-radio-play-idea-tutorial\/' rel=\"noopener\">YouTube Video API EventRadio Play Idea Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapiespit'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Stop Propagation Idea Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-stop-propagation-idea-tutorial\/' rel=\"noopener\">YouTube Video API Event Stop Propagation Idea Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Video API Event Stop Propagation Idea Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.jpg\" title=\"YouTube Video API Event Stop Propagation Idea Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Stop Propagation Idea Tutorial<\/p><\/div>\n<p>We&#8217;re back using the  <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 playing themes of <a title='YouTube Video API Interfacer Audio Play Tutorial' href='#ytvapiiapt'>YouTube Video API Interfacer Audio Play Tutorial<\/a> as a means to setting up a web application that may help explain &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='Information about event.stopPropagation()' href='http:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/stopPropagation' rel=\"noopener\">event.stopPropagation();<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; Javascript event control of it&#8217;s &#8220;bubbling&#8221; <font size=1>(up through an element hierarchy)<\/font>, in other words, depending where you place this, stopping it&#8217;s &#8220;bubbling up&#8221; at that element concerned &#8230;<\/p>\n<blockquote cite='http:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Event\/stopPropagation'><p>\nThe stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().\n<\/p><\/blockquote>\n<p>We find, around here, we don&#8217;t know we&#8217;ve created a need for event.stopPropagation() usage until we&#8217;ve stumbled onto it, most of the time, so trying to get in ahead of it with today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" rel=\"noopener\">to event.stopPropagation() or not to event.stopPropagation()<\/a> web application feels a bit novel to us, in a good way.<\/p>\n<p>This means by which to toggle that mode of use was more straightforward than &#8220;data control&#8221; with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either &#8230;<\/p>\n<ul>\n<li>YouTube video ID &#8230; 11 characters long &#8230; or &#8230;<\/li>\n<li>search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID<\/li>\n<\/ul>\n<p> &#8230; asking us to do a fair bit of tweaking to our inhouse interfacing &#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\">tweaked<\/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; helped out 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\/stop_start_youtube.html----------------GETME\" rel=\"noopener\">tweaked<\/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; you might want to try out, yourself, to see what we&#8217;re getting at here, below &#8230;<\/p>\n<p><iframe id=radioif src=\"\/\/www.rjmprogramming.com.au\/esp_ornot_esp.html\" style=\"width:100%;height:1200px;\"><\/iframe><\/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-video-api-event-stop-propagation-idea-tutorial\/' rel=\"noopener\">YouTube Video API Event Stop Propagation Idea Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapiiapt'>Previous relevant <a target=\"_blank\" title='YouTube Video API Interfacer Audio Play Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-interfacer-audio-play-tutorial\/' rel=\"noopener\">YouTube Video API Interfacer Audio Play 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?huh=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Video API Interfacer Audio Play Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_audio.gif\" title=\"YouTube Video API Interfacer Audio Play Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Interfacer Audio Play Tutorial<\/p><\/div>\n<p>The recent <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-earth-scanner-legs-tutorial\/' title='Making Of Earth Scanner Legs Tutorial' rel=\"noopener\">Making Of Earth Scanner Legs Tutorial<\/a> set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of &#8230;<\/p>\n<ul>\n<li>video &#8230; with an incarnation of this that plays &#8230;<\/li>\n<li>audio &#8230; &#8220;sort of&#8221; only (but able to be toggled back to video playing)\n<\/ul>\n<p> &#8230; and it got us wondering how to &#8220;dull out&#8221; a video.  We chose the CSS &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n iframe {  filter: invert(45%);  }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p>If you want a &#8220;complete dull out&#8221; try <i>filter: invert(50%);<\/i> &#8230; but we wanted to see controls down the bottom, still useful for audio <sub>only<\/sub> playing.<\/p>\n<p>You can try this all out 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>.<\/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='#d62826' onclick='var dv=document.getElementById(\"d62826\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62826' 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='#d66345' onclick='var dv=document.getElementById(\"d66345\"); 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='d66345' 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='#d66358' onclick='var dv=document.getElementById(\"d66358\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/radio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66358' 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='#d66365' onclick='var dv=document.getElementById(\"d66365\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66365' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wishful thinking with today&#8217;s tasklist regarding our current YouTube Video API Event Radio Play Idea Tutorial YouTube API interfacing web application project, where the blue ideas were started &#8230; st*_st* way to set mute straight away via $_GET[&#8216;mute&#8217;] and\/or blanks &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-radio-play-sharing-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":[88,1710,5057,2397,4291,5052,354,380,385,400,4295,2229,557,564,576,587,608,652,2205,760,5056,1898,997,1597,1133,1137,1159,5051,5054,5055,1319,1345,5053,1369,1391,1493,2017],"class_list":["post-66365","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-broadcast","tag-broadcasting","tag-bubble","tag-bubbling","tag-continous","tag-dom","tag-email","tag-emoji","tag-event","tag-event-stoppropagation","tag-hash","tag-hashtag","tag-hierarchy","tag-html","tag-iframe","tag-inheritance","tag-javascript","tag-loop","tag-media","tag-mute","tag-playlist","tag-programming","tag-radio","tag-share","tag-sharing","tag-sms","tag-stoppropagatin","tag-transistor","tag-transistor-radio","tag-tutorial","tag-url","tag-user-preference","tag-video","tag-volume","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66365"}],"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=66365"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66365\/revisions"}],"predecessor-version":[{"id":66375,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66365\/revisions\/66375"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}