{"id":66546,"date":"2025-01-16T03:01:00","date_gmt":"2025-01-15T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66546"},"modified":"2025-01-15T20:20:30","modified_gmt":"2025-01-15T10:20:30","slug":"youtube-video-api-event-playlist-generations-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-playlist-generations-tutorial\/","title":{"rendered":"YouTube Video API Event Playlist Generations 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 Playlist Generations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_yetmore.gif\" title=\"YouTube Video API Event Playlist Generations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Playlist Generations Tutorial<\/p><\/div>\n<p>Recently, on this current <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 Song Playing web application, further to the recent <a title='YouTube Video API Event Playlist User Settings Tutorial' href='#ytvapiepust'>YouTube Video API Event Playlist User Settings Tutorial<\/a>, we&#8217;ve been referring a lot to &#8230;<\/p>\n<p><code><br \/>\ntop.document.title<br \/>\n<\/code><\/p>\n<p> &#8230; as a place to store settings in which all three generational layers we&#8217;ve got going, can share information, and function calls like &#8230;<\/p>\n<p><code><br \/>\n var a_js_var = top.getlasttitleclicked();<br \/>\n<\/code><\/p>\n<p>This has all worked okay <font color=blue>until you consider<\/font>, &#8220;iframe hereditary wise&#8221; &#8230;<\/p>\n<ul>\n<li><font color=blue>greatgrandparent &#8230; WordPress blog (you are reading) uses an iframe to host all below, via that &#8220;here&#8221; link below &#8230;<\/font><\/li>\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>What happens?  Well &#8230;<\/p>\n<p><code><br \/>\ntop.document.title<br \/>\n<\/code><\/p>\n<p> &#8230; refers to this WordPress blog webpage, whereas we originally coded it with the intention that it would refer to the &#8220;grandparent&#8221; level webpage in the list above.  For the &#8220;title&#8221; scenario this can be remedied by code at the grandparent level checking for this scenario and being agile (as per some example code below) &#8230;<\/p>\n<p><code><br \/>\n  function clit(lno, twhat) {<br \/>\n    if (top.document.title.indexOf(twhat.split(' ...')[0]) > 0) {<br \/>\n    document.title=top.document.title;<br \/>\n    return top.document.title;<br \/>\n    } else {<br \/>\n    console.log('!' + origtitle + '! ... ' + lno + ': ' + ('' + (new Date())) + ' top.document.title=' + twhat);<br \/>\n    return twhat;<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  if (window.top) { if (window.top != window.self) {<br \/>\n         if (top.document.getElementById('phfloater') && !top.document.getElementById('listeleven')) {<br \/>\n           top.document.getElementById('phfloater').innerHTML+=\"&lt;div id=listeleven style='display:none;'&gt;&lt;\/div&gt;\";<br \/>\n         }<br \/>\n         if (top.document.title.indexOf(' ...') == -1) {<br \/>\n            tdtis=top.document.title;<br \/>\n            dtis=document.title;<br \/>\n            document.title=tdtis + ' ' + dtis;<br \/>\n            origtitle='' + document.title.split(' ...')[0] + ' ...';<br \/>\n            top.document.title=clit(401,document.title);<br \/>\n         }<br \/>\n  } }<br \/>\n<\/code><\/p>\n<p>But ideas like &#8230;<\/p>\n<p><code><br \/>\n var a_js_var = top.getlasttitleclicked();<br \/>\n<\/code><\/p>\n<p> &#8230; are another matter entirely.  We&#8217;re not going around shoving irrelevant Javascript functions into the makeup of our WordPress Blog webpages!  And that is the situation that made us try, for the first time we can remember &#8230;<\/p>\n<p><code><br \/>\n var a_js_var = parent.parent.getlasttitleclicked();<br \/>\n<\/code><\/p>\n<p> &#8230; huh?!  Yes, you can go back through the generations to an exact generation of interest, that way, and the Javascript function called exists, and according to the codeline above, if the code is in the grandchild level the called Javascript function is in a grandparent level. Cute, huh?!<\/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-playlist-generations-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist Generations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapiepust'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Playlist User Settings Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-playlist-user-settings-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist User Settings 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 Playlist User Settings Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_more.jpg\" title=\"YouTube Video API Event Playlist User Settings Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Playlist User Settings Tutorial<\/p><\/div>\n<p>We&#8217;re happy to be talking about three new pieces of functionality to add to our recent <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 Song Playing web application last talked about with the recent <a title='YouTube Video API Event Playlist Background Image Tutorial' href='#ytvapiepbit'>YouTube Video API Event Playlist Background Image Tutorial<\/a>, those being &#8230;<\/p>\n<ol>\n<li>&#128249; ( &amp;#128249; ) means by which a user can choose to suppress the video aspects (but not the controls) to the YouTube video &#8220;parent&#8221; level webpage(s) we display<\/li>\n<li>&#128220; ( &amp;#128220; ) scroll emoji allowing the Radio playing web application aspects push the relevant video playing parts to the top of the screen<\/li>\n<li>colour picker <input style=display:inline-block; type=color value='#ffff00'><\/input> can allow user tailoring of the background colour to the &#8220;parent&#8221; level webpages supervising the &#8220;grandchild&#8221; players of the YouTube videos<\/li>\n<\/ol>\n<p>These all rely on document.title settings &#8230;<\/p>\n<p><code><br \/>\n  function fixtitlecolour(inic) {<br \/>\n    if (document.title.indexOf(origtitle) == -1) {<br \/>\n         if (document.title.indexOf('Playlist playing ...') != -1) {<br \/>\n           origtitle='Playlist playing ...';<br \/>\n         }<br \/>\n    }<br \/>\n    if (('' + inic).toLowerCase().indexOf('ffff00') != -1) {<br \/>\n       if (document.title.indexOf(' background:') != -1) {<br \/>\n         document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');<br \/>\n         document.getElementById('karit').src=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 23));<br \/>\n       }<br \/>\n    } else {<br \/>\n       if (document.title.indexOf(' background:') != -1) {<br \/>\n         document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');<br \/>\n       }<br \/>\n       document.title=document.title.replace(origtitle, origtitle + ' background:linear-gradient(180deg,#' + inic.value.replace('#','') + ',#' + inic.value.replace('#','') + ') !important; background-color:#' + inic.value.replace('#','') + ' !important; ');<br \/>\n       document.getElementById('karit').src=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 23));<br \/>\n    }<br \/>\n    return true;<br \/>\n  }<br \/>\n  <br \/>\n  function togglesiv(aiois) {<br \/>\n     var aih=aiois.innerHTML, bih='';<br \/>\n     if (aih.indexOf('&lt;\/strike&gt;') == -1) {<br \/>\n       aiois.innerHTML='&lt;strike&gt;' + aih + '&lt;\/strike&gt;';<br \/>\n     } else {<br \/>\n       aiois.innerHTML=aih.replace('&lt;strike&gt;','').replace('&lt;\/strike&gt;','');<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n  function togglejustaudio(aiois) {<br \/>\n     var aih=aiois.innerHTML, bih='';<br \/>\n     if (aih.indexOf('&lt;\/strike&gt;') == -1) {<br \/>\n       if (document.title.indexOf(' justaudio ') == -1) {<br \/>\n       if (document.title.indexOf(origtitle) == -1) {<br \/>\n         if (document.title.indexOf('Playlist playing ...') != -1) {<br \/>\n           origtitle='Playlist playing ...';<br \/>\n         }<br \/>\n       }<br \/>\n       if (document.title.indexOf(' background:') != -1) {<br \/>\n         document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');<br \/>\n       }<br \/>\n       document.title=document.title.replace(origtitle, origtitle + ' justaudio background:linear-gradient(180deg,transparent,transparent) !important; background-color:transparent !important; ');<br \/>\n       document.getElementById('karit').src=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 23));<br \/>\n       }<br \/>\n       aiois.innerHTML='&lt;strike&gt;' + aih + '&lt;\/strike&gt;';<br \/>\n       if (document.getElementById('bplay')) {<br \/>\n         if (document.getElementById('bplay').innerHTML.indexOf('&nbsp;&nbsp;') != -1 && document.getElementById('bplay').innerHTML.indexOf('audio') == -1) {<br \/>\n           bih=document.getElementById('bplay').innerHTML.split('&nbsp;&nbsp;')[1];<br \/>\n           document.getElementById('bplay').innerHTML=document.getElementById('bplay').innerHTML.split('&nbsp;&nbsp;')[0] + '&nbsp;&nbsp;just&nbsp;audio&nbsp;' + bih;<br \/>\n         }<br \/>\n       }<br \/>\n     } else {<br \/>\n       document.title=document.title.replace(\/\\ justaudio\\ \/g,' ');<br \/>\n       aiois.innerHTML=aih.replace('&lt;strike&gt;','').replace('&lt;\/strike&gt;','');<br \/>\n       if (document.getElementById('bplay').innerHTML.indexOf('&nbsp;&nbsp;') != -1 && document.getElementById('bplay').innerHTML.indexOf('audio') != -1) {<br \/>\n           bih=document.getElementById('bplay').innerHTML.indexOf('&nbsp;&nbsp;')[1];<br \/>\n           document.getElementById('bplay').innerHTML=document.getElementById('bplay').innerHTML.replace('&nbsp;&nbsp;just&nbsp;audio&nbsp;','&nbsp;&nbsp;');<br \/>\n       }<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n<\/code><\/p>\n<p>Codewise, it was all of the <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=g9OAjqs6dOo' rel=\"noopener\">&#8220;the three amigos&#8221;<\/a>, at it again &#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> &#8230; that got involved.<\/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-video-api-event-playlist-background-image-tutorial\/' rel=\"noopener\">New YouTube Video API Event Playlist Background Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapiepbit'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Playlist Background Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-playlist-background-image-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist Background Image 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 Playlist Background Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_b_i.jpg\" title=\"YouTube Video API Event Playlist Background Image Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Playlist Background Image Tutorial<\/p><\/div>\n<p>Our current project last talked about with <a title='YouTube Video API Event Playlist Shuffle and Loop Tutorial' href='#ytvapiepslt'>YouTube Video API Event Playlist Shuffle and Loop Tutorial<\/a> started as a &#8230;<\/p>\n<ul>\n<li>&#8220;proof of concept&#8221; one to allow for user testing of event.stopPropagation() Javascript event bubbling control usage &#8230; and yet, is also a &#8230;<\/li>\n<li>player of YouTube videos using the YouTube API inhouse interfacing here<\/li>\n<\/ul>\n<p> &#8230; and it is the second functionality we want to emphasize.  In such scenarios, we sometimes apply an apt Background Image (we&#8217;re applying to all document.body) <font color=blue>via<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  td { vertical-align: top; }<br \/>\n  select { background-color: lightblue; }<br \/>\n  option:not(:checked) { background-color: yellow; opacity: 0.5;  }<br \/>\n  textarea { background-color: #f0f0f0; }<br \/>\n  <font color=blue>body {<br \/>\n    background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('\/retro-music-concept-with-headphones-space.jpg');<br \/>\n    background-size:cover;<br \/>\n    background-repeat:no-repeat;<br \/>\n  }<\/font><br \/>\n  <font color=purple>* { border-radius:10px; border-color:magenta;  }<\/font><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and regarding <i>\/retro-music-concept-with-headphones-space.jpg<\/i> we have <a target=\"_blank\" title=\"Freepik\" href=\"\/\/www.freepik.com\/search?format=search&#038;last_filter=selection&#038;last_value=1&#038;query=Playlist+Background&#038;selection=1\" rel=\"noopener\">Freepik<\/a> to thank for the free headphones background image we found there and downloaded then uploaded into place.<\/p>\n<p>While we&#8217;re talking <i>styling<\/i> another CSS measure we often use to change the aesthetics of a webpage look is to soften some squared off borders via the <font color=purple>application of a <a target=\"_blank\" title='CSS border-radius property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.php' rel=\"noopener\">border-radius<\/a><\/font>.<\/p>\n<p>The meta viewport tag came in handy for this project, as another layer, for mobile platforms, of allowing mobile gestures to genuinely improve the video viewing, for the user &#8230;<\/p>\n<p><code><br \/>\n&lt;meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes'  &gt;<br \/>\n<\/code><\/p>\n<p><img style='width:100%;' src='http:\/\/www.rjmprogramming.com.au\/iphone_look.jpg'><\/img><\/p>\n<p>Another matter with mobile usage and a personalized playlist play scenario was that the use of the Mute and Unmute checkboxes at the &#8220;grandparent&#8221; level did not amount to a real click at the &#8220;grandchild&#8221; level, and so we started involving Javascript <a target=\"_blank\" title='Javascript confirm box information from W3schools' href='https:\/\/www.w3schools.com\/jsreF\/met_win_confirm.asp' rel=\"noopener\">confirm<\/a> box querying of users here, and this satisfied as a real user click for mobile platform media play purposes.<\/p>\n<p>Codewise, all of the <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=g9OAjqs6dOo' rel=\"noopener\">&#8220;the three amigos&#8221;<\/a>, at it again &#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> &#8230; got involved.<\/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-video-api-event-playlist-shuffle-and-loop-tutorial\/' rel=\"noopener\">New YouTube Video API Event Playlist Shuffle and Loop Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapiepslt'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Playlist Shuffle and Loop Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-playlist-shuffle-and-loop-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist Shuffle and Loop 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 Playlist Shuffle and Loop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_shuffle_and_loop.gif\" title=\"YouTube Video API Event Playlist Shuffle and Loop Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Playlist Shuffle and Loop Tutorial<\/p><\/div>\n<p>We left our Song Playing web application in <a title='YouTube Video API Event Playlist Save and Recall Tutorial' href='#ytvapiepsrt'>YouTube Video API Event Playlist Save and Recall Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>on mobile, needing a lot of &#8220;user tap maintenance&#8221; to keep the &#8220;personalized playlist&#8221; (consisting of YouTube ID video) music rolling &#8230; hence our &#8230;<br \/>\n<blockquote>\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<\/blockquote>\n<p> &#8230; from a preceeding tutorial &#8230; well &#8230; we still allow that mode of use, but add to that, the possibility of &#8230;<\/li>\n<li>on mobile or non-mobile, we now offer the referencing of &#8230;\n<ol>\n<li><a target=\"_blank\" title='YouTube' href='http:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> Playlist IDs (34 characters) &#8230; or &#8230;<\/li>\n<li><a target=\"_blank\" title='YouTube' href='http:\/\/spotify.com' rel=\"noopener\">Spotify<\/a> Playlist IDs (22 characters)<\/li>\n<\/ol>\n<p> &#8230; so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays <font size=1>(now appearing in the web application title &#8230; doh!! &#8230; yay!!!!)<\/font><\/li>\n<\/ul>\n<p>The way to access this new functionality, above, is via the &#8220;now always appearing&#8221; &#127850; ( &amp;#127850; Cookie button ) <font color=blue>new prompt window arrangement<\/font> &#8230;<\/p>\n<p><code><br \/>\n   var xname='';<br \/>\n   if (('' + location.hash).replace(\/^\\#\/g,'') != '') {<br \/>\n   xname=prompt('Recall name for this playlist.  <font color=purple>Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play.  Spaces at front results in a request to us at RJM Programming to host your proposed playlist on our YouTube channel and we will return a 34 character ID you can use yourself in the textbox presented.  Add spaces at end also to just attend to that email off to RJM Programming.<\/font>', '');<br \/>\n   } else {<br \/>\n   <font color=blue>xname=prompt('Please optionally enter a recallable YouTube (34) or Spotify (22) playlist ID we will save for you from here on in optionally suffixed by # hashtag separated playlist title.  Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play.  Our supplied YouTube playlist ID example is Nala and Luna (mainly) but please use Cancel to avoid remembering this playlist into the future.', 'PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE#Nala and Luna');<\/font><br \/>\n   if (xname != null) { if (eval('' + xname.indexOf('#')) &gt; 0) { btoaname=encodeURIComponent(xname.split('#')[1].replace(\/\\ \/g,'_'));  xname=xname.split('#')[0];  } usethisnotlh=xname;  }<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; that is possible when no personalized playlist hashtag data is in the mix.  If it is, well, that <font color=purple>opens another whole story<\/font> all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the <a target=\"_blank\" title='RJM Programming YouTube channel' href='https:\/\/www.youtube.com\/@rmetcalfeify' rel=\"noopener\">RJM Programming YouTube Channel<\/a>, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).<\/p>\n<p>We&#8217;ve allowed those YouTube search results to &#8220;linger longer&#8221; too, by replicating them at the &#8220;grandparent level&#8221; at the point of time we wipe them from the &#8220;parent level&#8221;, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.<\/p>\n<p>Codewise, two of the <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=g9OAjqs6dOo' rel=\"noopener\">&#8220;the three amigos&#8221;<\/a> were at it again &#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\/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> <font size=2>obviously not progressing at school, or not changing, often enough, like, if you know what we mean<\/font><font size=1> &#8230; tut, tut!<\/font><\/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-video-api-event-playlist-shuffle-and-loop-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist Shuffle and Loop Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapiepsrt'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Playlist Save and Recall Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-playlist-save-and-recall-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist Save and 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\/esp_ornot_esp.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Video API Event Playlist Save and Recall Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/esp_ornot_esp_save_recall.gif\" title=\"YouTube Video API Event Playlist Save and Recall Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Video API Event Playlist Save and Recall Tutorial<\/p><\/div>\n<p>Meanwhile, back at the wishlist, with our recent <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 &#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 \/>\n<font color=olive>Save a playlist for later via window.localStorage<\/font><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 \/>\n<font color=olive>Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)<\/font>\n<\/p><\/blockquote>\n<p> &#8230; it is <font color=olive>the olive<\/font> ideas <i>we&#8217;ve made a start on<\/i> today.  We say &#8220;<i>we&#8217;ve made a start on<\/i>&#8221; only because, when it comes to programming, it doesn&#8217;t pay to close off alternate ideas as you go about looking for solutions.  Take &#8220;<font color=olive>Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)<\/font>&#8221; <font size=2>(for some reason we&#8217;re nicknaming <a target=\"_blank\" title=\"?\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-contact-us-feedback-filtering-tutorial\/' rel=\"noopener\">&#8220;innerHTML&#8221;<\/a><\/font><font size=1> &#8230; who wrote this script<\/font><font size=2>)<\/font> &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/bondi_innerHTML.gif'><\/img><\/p>\n<p> &#8230; well, yes, that would be nice, but, more to the point, we started involving <i>top.document.title<\/i> in solution making but then, along the way, started incorporating just plain and simple Javascript get\/set function<sub>ality<\/sub> &#8230;<\/p>\n<p><code><br \/>\n  var ajaxs_ih='';<br \/>\n  <br \/> <br \/>\n  function get_ajaxs_ih() {<br \/>\n    return ajaxs_ih;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function set_ajaxs_ih(wht) {<br \/>\n    ajaxs_ih=wht;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; <i>parent.get_ajaxs_ih()<\/i> and <i>parent.set_ajaxs_ih(strIn)<\/i> references from the &#8220;parent&#8221; level referencing the &#8220;grandparent&#8221; level (of code above) and being able to populate those YouTube search dropdowns more efficiently.  This get\/set paradigm is &#8220;a classic&#8221; method<sub>ology<\/sub> in a lot of OOP work, further to the recent <a title='YouTube Video API Event Radio Play Sharing Tutorial' href='#ytvapierpst'>YouTube Video API Event Radio Play Sharing Tutorial<\/a>.<\/p>\n<p>Codewise, again, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=g9OAjqs6dOo' rel=\"noopener\">&#8220;the three amigos&#8221;<\/a> were at it again &#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\/youtube-video-api-event-playlist-save-and-recall-tutorial\/' rel=\"noopener\">YouTube Video API Event Playlist Save and Recall Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytvapierpst'>Previous relevant <a target=\"_blank\" title='YouTube Video API Event Radio Play Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-radio-play-sharing-tutorial\/' rel=\"noopener\">YouTube Video API Event Radio Play Sharing 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 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<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='#d66406' onclick='var dv=document.getElementById(\"d66406\"); 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='d66406' 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='#d66495' onclick='var dv=document.getElementById(\"d66495\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/loop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66495' 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='#d66504' onclick='var dv=document.getElementById(\"d66504\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66504' 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='#d66536' onclick='var dv=document.getElementById(\"d66536\"); 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='d66536' 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='#d66546' onclick='var dv=document.getElementById(\"d66546\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66546' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Recently, on this current YouTube API interfacing Song Playing web application, further to the recent YouTube Video API Event Playlist User Settings Tutorial, we&#8217;ve been referring a lot to &#8230; top.document.title &#8230; as a place to store settings in which &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-video-api-event-playlist-generations-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":[113,2682,127,1798,1710,5057,2397,4291,174,211,224,2690,5052,1860,281,354,380,385,3606,400,4295,5071,485,3007,3008,5072,2229,557,564,576,587,608,5066,626,630,652,2415,2205,760,776,795,822,5056,2411,2362,5001,1898,997,1597,3274,1917,1107,1133,1137,4438,1159,1172,1184,5051,5065,1292,5054,5055,1319,5064,1345,5053,1369,1373,1391,1493,2017],"class_list":["post-66546","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-audio","tag-background-colour","tag-background-image","tag-border-radius","tag-broadcast","tag-broadcasting","tag-bubble","tag-bubbling","tag-button","tag-click","tag-colour","tag-confirm","tag-continous","tag-cookie","tag-css","tag-dom","tag-email","tag-emoji","tag-emoji-button","tag-event","tag-event-stoppropagation","tag-generation","tag-gesture","tag-grandchild","tag-grandparent","tag-greatgrandparent","tag-hash","tag-hashtag","tag-hierarchy","tag-html","tag-iframe","tag-inheritance","tag-intersessional","tag-ios","tag-ipad","tag-javascript","tag-localstorage","tag-loop","tag-media","tag-meta","tag-mobile","tag-music-2","tag-mute","tag-parent","tag-play","tag-playing","tag-playlist","tag-programming","tag-radio","tag-recall","tag-scroll","tag-scrolling","tag-share","tag-sharing","tag-shuffle","tag-sms","tag-song","tag-spotify","tag-stoppropagatin","tag-store","tag-top","tag-transistor","tag-transistor-radio","tag-tutorial","tag-tutorials-api","tag-url","tag-user-preference","tag-video","tag-viewport","tag-volume","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66546"}],"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=66546"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66546\/revisions"}],"predecessor-version":[{"id":66552,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66546\/revisions\/66552"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}