{"id":53013,"date":"2021-08-15T03:01:21","date_gmt":"2021-08-14T17:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53013"},"modified":"2021-08-15T09:18:17","modified_gmt":"2021-08-14T23:18:17","slug":"karaoke-youtube-video-search-improvement-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-youtube-video-search-improvement-tutorial\/","title":{"rendered":"Karaoke YouTube Video Search Improvement Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Karaoke YouTube Video Search Improvement Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_embedded_iframe_api_karaoke_multiple_selection_revisit.gif\" title=\"Karaoke YouTube Video Search Improvement Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Karaoke YouTube Video Search Improvement Tutorial<\/p><\/div>\n<p>We need to thank last Friday&#8217;s <a target=_blank title='ABC' href='\/\/abc.net.au'>ABC<\/a> <a target=_blank title='ABC The Drum' href='https:\/\/iview.abc.net.au\/show\/drum'>The Drum<\/a> <a target=_blank title='The Drum episode' href='https:\/\/iview.abc.net.au\/video\/NC2107H140S00'>episode&#8217;s last story<\/a> about the wonderful <a target=_blank title='Hummingsong Community Choir' href='https:\/\/www.hummingsong.com.au\/'>Hummingsong Community Choir<\/a>, in turn leading me to this <a target=_blank title=\"Australia's Got Talent\" href='https:\/\/www.youtube.com\/channel\/UC2iSrAs-mQ1yKqM38eonAjQ'>Australia&#8217;s Got Talent<\/a> <a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> video &#8230;<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/8D_agY4LlTI\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p> &#8230; and onto some research into <a target=_blank title='Keane information from Wikipedia, thanks'' href='https:\/\/en.m.wikipedia.org\/wiki\/Keane_(band)'>Keane<\/a> (the band who wrote that &#8220;Somewhere Only We Know&#8221; song that had stayed in my mind, quietly, for a very long time) and others like <a target=_blank title='Lily Allen information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Lily_Allen'>Lily Allen<\/a> who have covered it.<\/p>\n<p>Software came into it with me wanting to sequence some video versions of that song, and some unexpected surprises when submitting our inhouse Karaoke <a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>API for Iframe<\/a> interfacer to the task where we found &#8230;<\/p>\n<ul>\n<li>issues when ( and ) appear in a YouTube video title &#8230; and &#8230;<\/li>\n<li>issues with video duration calculations with the more recent minutes and seconds format we use when &#8230;<\/li>\n<li>setting the &#8220;&gt;1&#8221; checkbox after a YouTube video search dropdown and selecting several videos and then choosing out of &#8230;\n<ol>\n<li>Ready &#8230; each fills a window and might autoplay synchronously<\/li>\n<li>Grid &#8230; each sits within a 3&#215;3 grid table and does not attempt autoplay<\/li>\n<li>Synchronize &#8230; each sits in a table cell of a window and might autoplay synchronously<\/li>\n<li>Superimpose &#8230; each sits on top of the last table cell in a window and might autoplay synchronously<\/li>\n<\/ol>\n<p> &#8230; modes of play, where &#8220;Ready&#8221; and &#8220;Synchronize&#8221; needed further tweaking<\/li>\n<\/ul>\n<p>And so, we improve on the recent <a title='Karaoke YouTube Video Search Update Tutorial' href='#kytvsut'>Karaoke YouTube Video Search Update Tutorial<\/a>, where helping out is <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\" title='stop_start_youtube.html'>a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------GETME\" title='stop_start_youtube.html'>stop_start_youtube.html<\/a> for <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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------GETME\">karaoke_youtube_api.htm<\/a> HTML and Javascript code&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>Would you like to overdose on &#8220;Somewhere Only We Know&#8221;?  Try selecting your own from <a target=_blank href=' https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=somewhere+only+we+know&#038;youtube_duration=&#038;email=&#038;emoji=on'>this link<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-youtube-video-search-improvement-tutorial\/'>Karaoke YouTube Video Search Improvement Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kytvsut'>Previous relevant <a target=_blank title='Karaoke YouTube Video Search Update Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-youtube-video-search-update-tutorial\/'>Karaoke YouTube Video Search Update 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\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Karaoke YouTube Video Search Update Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_search_update.jpg\" title=\"Karaoke YouTube Video Search Update Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Karaoke YouTube Video Search Update Tutorial<\/p><\/div>\n<p>Way back at the time of writing <a title='Karaoke YouTube Video Search Error 503 Tutorial' href='#kytvse503t'>Karaoke YouTube Video Search Error 503 Tutorial<\/a> we were first allowing for &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> website search functionality &#8230; augment that of &#8230;<\/li>\n<li><a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>API for Iframe embedded videos<\/a> usage<\/li>\n<\/ul>\n<p> &#8230; the latter &#8220;original intention&#8221; functionality only kicking in once a <a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> video of interest is found.  In other words, finding what you want is beyond the scope of the API here, unless you (the user) settle for a channel or user or playlist of interest.<\/p>\n<p>We discovered this <a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> website search functionality integration failing the other day with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title=\"Click picture\">YouTube API integrated inhouse web application<\/a> (via Karaoke thoughts), and discovered that the <a target=_blank title='jQuery Ajax' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> return data had changed.<\/p>\n<p>Because it is <a target=_blank title='jQuery Ajax' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> debugging is best done using <a target=_blank title='HTML DOM console.log information' href='https:\/\/www.w3schools.com\/jsref\/met_console_log.asp'>&#8220;console.log&#8221;<\/a> we&#8217;ve had our arm twisted a lot lately, admitting (ie. we&#8217;re very fond of alert() Javascript windows around here, but alert() popup windows have that disadvantage of affecting window focus, and this can muck up what you are looking at, a bit like <a target=_blank title='photons' href='https:\/\/en.wikipedia.org\/wiki\/Uncertainty_principle'>if we look at photons we interfere<\/a>).<\/p>\n<p>You&#8217;ll know you&#8217;re &#8220;getting into it&#8221; if your console.log statements get longer &#8230; as you can see <font color=blue>a bit of<\/font> below &#8230;<\/p>\n<p><code><br \/>\n$.ajax({ url: dp + \"legend_via_map.php\",<br \/>\ndata: {\"url\":dprefix + qsel},<br \/>\ntype: 'get',<br \/>\nsuccess: function(output) {<br \/>\n\/\/document.title+=' success ' + output.indexOf('-describedby=') + ' ' + output.indexOf('described') + ' ';<br \/>\n\/\/alert(output);<br \/>\nvar teq=' title=\"';<br \/>\nvar teqtwo='';<br \/>\n<font color=blue>console.log('Success:'); <\/font><br \/>\nvar selc='', fosecs=0.0, afosecs=[], ifo=0, fofactor=1.0;<br \/>\n<font color=blue>console.log('1'); <\/font><br \/>\nvar qqbits=output.split('v=');<br \/>\n<font color=blue>console.log('2'); <\/font><br \/>\nvar qqtbits=output.split('-describedby='); \/\/'\/watch?'); \/\/ '\"commandMetadata\":{\"webCommandMetadata\":{\"url\":\"\/watch'); \/\/ '-describedby=');<br \/>\nif (qqbits.length &gt; 1 && qqtbits.length == 1) {<br \/>\n  qqtbits=output.split('watchEndpoint');<br \/>\n  teq='\"title\":{';<br \/>\n  teqtwo='\"text\":\"';<br \/>\n}<br \/>\n<font color=blue>console.log('3 ' + teq); <\/font><br \/>\nif (qqtbits.length == 1 && output.indexOf('503 ') != -1) {   document.title+=' ... please try again later.';   }<br \/>\n<font color=blue>console.log('4'); <\/font><br \/>\nvar qdelim=' ', tqbits, ttqqbits='', attqqbits=[], durbits='', adurbits;<br \/>\n<font color=blue>console.log('5'); <\/font><br \/>\nvar q11=11;<br \/>\nvar teqx='';<br \/>\n<font color=blue>console.log('6'); <\/font><br \/>\nvar fgs='findings are ', sze='', is_okay=true, jis_okay=0;<br \/>\n<font color=blue>console.log('7 ' + qqbits.length + ' ' + qqtbits.length); <\/font><br \/>\nif (qqbits.length &gt; 1 && qqtbits.length == 1) {<br \/>\n  console.log('error: ' + dprefix + qsel);  window.open(dprefix + qsel, '_blank'); \/\/, 'top=30,left=30,width=900,height=900');<br \/>\n}<br \/>\nfor (var ifgs=1; ifgs&lt;qqtbits.length; ifgs++) {<br \/>\n  fosecs=0.0;<br \/>\n  fofactor=1.0;<br \/>\n  tqbits=qqtbits[eval(-1 + ifgs)].split(teq); \/\/' title=\"');<br \/>\n  ttqqbits=qqtbits[eval(-1 + ifgs)].split('v=')[eval(-1 + qqtbits[eval(-1 + ifgs)].split('v=').length)].substring(0,q11);<br \/>\n<br \/> <br \/>\n  if (selc == '') { \/\/ && document.getElementById('ajax').innerHTML == '') {<br \/>\n\/\/    document.title+=' 1 ';<br \/>\n    if (zeroplay == 0) {<br \/>\n\/\/    document.title+=' 2 ';<br \/>\n      document.getElementById(\"myh1\").innerHTML=document.getElementById(\"myh1\").innerHTML.replace('Karaoke via ',ourvid + ' Video Lookup via ');<br \/>\n      if (ttqqbits.indexOf('&lt;') != -1) {<br \/>\n      sze=\" size=\" + eval(-1 + qqtbits.length) + \" \";<br \/>\n      } else {<br \/>\n      sze=\" size=\" + qqtbits.length + \" \";<br \/>\n      }<br \/>\n      document.getElementById(\"myform\").innerHTML+=\"&lt;input type=hidden name=justplay id=justplay value=y&gt;&lt;\/input&gt;\";<br \/>\n    }<br \/>\n    if (ttqqbits.indexOf('&lt;') == -1) {<br \/>\n      if (document.URL.indexOf('minimize=') != -1) {  domin=true;  }<br \/>\n      selc=preselc + \"&lt;select\" + sze + \" title='YouTube videos' id=ajaxs ondblclick=dputy(this); onchange=puty(this);&gt;&lt;option id=ominpossible value=&gt;Optionally choose YouTube title below ...&lt;\/option&gt;&lt;\/select&gt;&nbsp;&lt;div id=placeforvideo&gt;&lt;\/div&gt;\";<br \/>\n    }<br \/>\n  }<br \/>\n  \/\/ more code follows ... until ...<br \/>\n}<br \/>\n  if (is_okay) { document.getElementById('ajax').innerHTML=selc;  if (document.URL.indexOf('pvostid=') !== -1) { if (parent.document.getElementById('ajaxs')) { parent.document.getElementById('ajaxs').innerHTML+='&lt;option value=\" ... and then ...\"&gt;... and then ...&lt;\/option&gt;' + selc.split('&lt;\/select&gt;')[0].split('Optionally choose YouTube title below ...&lt;\/option&gt;')[1]; parent.ajaxsih=parent.document.getElementById('ajaxs').innerHTML; parent.document.getElementById('ajaxs').size='' + eval(26 + parent.document.getElementById('ajaxs').size); } }  if (domin) {  mintoajax();  } }<br \/>\n}<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; used both in the &#8220;where in the code do we get to&#8221; sense and a &#8220;variable watch debugging&#8221; sense &#8230; and with <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\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------GETME\">karaoke_youtube_api.htm<\/a> HTML and Javascript code.<\/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\/karaoke-youtube-video-search-update-tutorial\/'>Karaoke YouTube Video Search Update Tutorial<\/a>.<\/p-->\n<hr>\n<p id='kytvse503t'>Previous relevant <a target=_blank title='Karaoke YouTube Video Search Error 503 Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-youtube-video-search-error-503-tutorial\/'>Karaoke YouTube Video Search Error 503 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\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Karaoke YouTube Video Search Error 503 Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_search_error_503.jpg\" title=\"Karaoke YouTube Video Search Error 503 Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Karaoke YouTube Video Search Error 503 Tutorial<\/p><\/div>\n<p>Working on the code changes of yesterday&#8217;s <a title='Karaoke YouTube Video Search Refinement Tutorial' href='#kytvsrt'>Karaoke YouTube Video Search Refinement Tutorial<\/a>&#8216;s inhouse HTML code, serving as our portal into use of the wonderful <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>API for Iframe embedded videos<\/a>, we learnt more about the HTTP status\/<a target=_blank title='HTTP status\/error code 503 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_of_HTTP_status_codes#503'>error code 503<\/a> &#8230;<\/p>\n<p><code><br \/>\n503 Service Unavailable<br \/>\n    The server cannot handle the request (because it is overloaded or down for maintenance). Generally, this is a temporary state.<br \/>\n<\/code><\/p>\n<p> &#8230; in that our penchant for <b>&#8220;hotkey&#8221;<\/b> like &#8230;<\/p>\n<p><code><br \/>\n&lt;input title=\"Can use , or && for 'and' and || for 'or' search logics.  Prefix && enforces in title search.\" onblur=\"findduration(this,'');\" name='youtubeid' id='youtubeid' placeholder=\"Can use , or && for 'and' and || for 'or' search logics.  Prefix && enforces in title search.\" type='text' value=''  <b>onkeyup<\/b>='ycval(event);' <b>oninput<\/b>=yprecval(this); onclick='yofc(this);'&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<ul>\n<li><a target=_blank title='Event oninput information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_oninput.asp'><b>oninput<\/b><\/a><\/li>\n<li><a target=_blank title='Event onkeyup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onkeyup.asp'><b>onkeyup<\/b><\/a><\/li>\n<\/ul>\n<p> &#8230; event sensitivity, as powerful as &#8220;hotkey&#8221; (textbox) looking might be, but can also &#8220;run off the rails&#8221; with too much activity if combined with <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> methodologies and can, as of yesterday (not today, but please read on), be a burden to the destination of the Ajax requests, that being in our case the <a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> website&#8217;s search functionality (via ?search_query= arguments).<\/p>\n<p>We were (yesterday) sometimes bombarding YouTube with too many requests in a short period of time, hence the HTTP status\/error code 503 we now inform the user of in a changed webpage title (though now we hope you do not get this error anymore).<\/p>\n<p>How do we go about getting the web application to <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=m7BgOYPNTlA'>curb its enthusiasm<\/a> regarding asking YouTube for a search functionality response?  You may have noticed in the HTML above for the textbox another event, the incredibly useful &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'>onblur<\/a><\/li>\n<\/ul>\n<p> &#8230; called as a user completes their textbox entry (on non-mobile platforms, they tab out of the textbox).  Intervention at this event gives us the opportunity to call a halt to a more carefully timed (2 second) amount of &#8220;hotkey&#8221; based YouTube search functionality requesting, a vast improvement on the potentiality for several requests a second without this dampening down of activity (and sometimes getting into 503 unpopularity with YouTube, we&#8217;re guessing).<\/p>\n<p>The following new Javascript global variables &#8230;<\/p>\n<p><code><br \/>\nvar lastgetytlist='';  \/\/ store and compare against the last YouTube (perhaps search functionality) query (if the same, do not repeat)<br \/>\nvar amwaiting=null;    \/\/ variable for a setInterval call dampening down the YouTube request rate ... via the control of ...<br \/>\nvar allowable=true;    \/\/ if true, you are clear to request from YouTube, else false<br \/>\n<\/code><\/p>\n<p> &#8230; should be of interest as you examine the HTML <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\">improved functionality<\/a> (for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------GETME\">karaoke_youtube_api.htm<\/a>) which you can try for yourself at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='kytvsrt'>Previous relevant <a target=_blank title='Karaoke YouTube Video Search Refinement Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-youtube-video-search-refinement-tutorial\/'>Karaoke YouTube Video Search Refinement 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\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Karaoke YouTube Video Search Refinement Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_search_refinement.gif\" title=\"Karaoke YouTube Video Search Refinement Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Karaoke YouTube Video Search Refinement Tutorial<\/p><\/div>\n<p>The last time we changed our YouTube video lookup interfacer, that used a Karaoke idea for its first incarnation, hence the name &#8220;karaoke_youtube_api.htm&#8221; as you can read about at <a title='Other Side of the World Iframe Tutorial' href='#oswit'>Other Side of the World Iframe Tutorial<\/a>, it was an integration job.   Today we work at the other end of the equation, if you like, channelling <a target=_blank href='https:\/\/www.youtube.com'>YouTube<\/a> search functionality &#8220;under the hood&#8221; (and we thank <a target=_blank title='Great link, thanks' href='https:\/\/tubularinsights.com\/advanced-youtube-search-tips\/'>this great link<\/a> for the heads up here) &#8230;<\/p>\n<ul>\n<li>Boolean Operators<\/li>\n<li>Google Search Operator &#8230; Force your search terms in the name of the video<\/li>\n<\/ul>\n<p> &#8230; but being tickled pink with PHP and Javascript we allowed for user usage, now, as per &#8230;<\/p>\n<p><code><br \/>\nCan use , or && for 'and' and || for 'or' search logics.  Prefix && enforces in title search.<br \/>\n<\/code><\/p>\n<p>The example below making use of this <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\">new functionality<\/a> (for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------GETME\">karaoke_youtube_api.htm<\/a>) you can <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=South%20America%20%26%26%20Sao%20Paulo\" title=\"Click picture\">see in action below<\/a> shows an initial YouTube search of &#8220;South America&#8221; be refined to &#8220;South America &#038;&#038; Sao Paulo&#8221; to include a drilling down into videos about Brazil&#8217;s most populous city&#8230;<\/p>\n<div style=\"width:100%;height:1800px;-webkit-overflow-scrolling:touch;overflow:scroll;\"><iframe style=\"width:100%;height:1800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=South%20America%20%26%26%20Sao%20Paulo\" title=\"South America &#038;&#038; Sao Paulo\"><\/iframe><\/div>\n<hr>\n<p id='oswit'>Previous relevant <a target=_blank title='Other Side of the World Iframe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-iframe-tutorial\/'>Other Side of the World Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Cairo\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_iframe_more.jpg\" title=\"Other Side of the World Iframe Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Iframe Tutorial<\/p><\/div>\n<p>Our &#8220;Other Side of the World&#8221; web application we&#8217;ve been developing lately has made extensive use of the HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> element, mainly as a &#8220;reader&#8221; of data in that <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> technique way.  But the HTML iframe element is probably better known for its data integration and display talents, and it is these that we call upon today, to (software) integrate two other existing sources of data so that, display-wise we have four table (td) cells in play now those being the original &#8230;<\/p>\n<ul>\n<li>top left cell where the user interacts to show latitude and longitudes and placenames of interest<\/li>\n<li>top right cell showing these &#8220;latitude and longitudes and placenames of interest&#8221; paired with their &#8220;Other Side of the World&#8221; counterparts within a <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> (software) integration &#8230; and, as of today we add into the equation &#8230;<\/li>\n<li>bottom left cell where depending on whether we&#8217;ve derived our &#8220;latitude and longitudes and placenames of interest&#8221; from &#8230;\n<ol>\n<li>the <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> HTML select (dropdown) element results in an HTML iframe element hosting a <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-autocomplete-tutorial\/' title='Weather API via Iframe jQuery Ajax Autocomplete Tutorial'>Weather API via Iframe jQuery Ajax Autocomplete Tutorial<\/a>&#8216;s TimeZone Places dataset &#8230; or &#8230;<\/li>\n<li>the <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>useful webpage<\/a> (thanks) HTML select (dropdown) element results in an HTML iframe element hosting a <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-video-in-iframe-api-regex-tutorial\/' title='YouTube Embedded Video in Iframe API RegEx Tutorial '>YouTube Embedded Video in Iframe API RegEx Tutorial <\/a>&#8216;s <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> (embedded) video integrator<\/li>\n<\/ol>\n<\/li>\n<li>bottom right cell where the user&#8217;s &#8220;latitude and longitudes and placenames of interest&#8221;&#8216;s &#8220;Other Side of the World&#8221; interfaces to the <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>useful webpage<\/a> (thanks) HTML select (dropdown) element results in an HTML iframe element hosting a <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-video-in-iframe-api-regex-tutorial\/' title='YouTube Embedded Video in Iframe API RegEx Tutorial '>YouTube Embedded Video in Iframe API RegEx Tutorial <\/a>&#8216;s <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> (embedded) video integrator<\/li>\n<\/ul>\n<p>We now think the use of all this can have you hopping around the world discovering lots of geographical based, video based and timezone based information about lots of places around the world, lots of which you may never have known much about.<\/p>\n<p>We&#8217;ve software integrated today, as well as integrated &#8220;where&#8221; web application thoughts with &#8220;when&#8221; web application thoughts.<\/p>\n<p>Another feature of today&#8217;s changes involves the <a target=_blank title='Geolocation information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Geolocation'>geolocation<\/a> features of the Javascript &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Geolocation\/getCurrentPosition'>navigator.geolocation.getCurrentPosition(success[, error[, options]])<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; syntax method of allowing Location Services, if allowed by the user, return a latitude and longitude position of the user themselves, information used at the instigation of the web application, and which we also used with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-where-does-it-get-me-to-primer-tutorial\/' title='HTML\/Javascript Where Does It Get Me To Primer Tutorial'>HTML\/Javascript Where Does It Get Me To Primer Tutorial<\/a> and <a target=_blank title='Google Chart Map Chart Select Event Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-map-chart-select-event-primer-tutorial\/'>Google Chart Map Chart Select Event Primer Tutorial<\/a> in the past.<\/p>\n<p>The code for this remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html---GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our HTML iframe (software) integration purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a> (or try out for a specific (argument) location, such as <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Alice%20Springs' title='other_side_of_the_world.htm'>Alice Springs try out<\/a>), again.  It also required small changes to &#8230;<\/p>\n<ul>\n<li>HTML of the YouTube embedded iframe video integrator&#8217;s supervisory <a target=_blank title='karaoke_youtube_api.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------GETME'>karaoke_youtube_api.htm<\/a> changed in <a target=_blank title='karaoke_youtube_api.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------GETME'>this way<\/a> and with this <a target=_blank title='karaoke_youtube_api.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm'>live run<\/a> link<\/li>\n<\/ul>\n<p>We hope you try it out and discover some new things!<\/p>\n<hr>\n<p id='osotwot'>Previous relevant <a target=_blank title='Other Side of the World Onblur Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-onblur-tutorial\/'>Other Side of the World Onblur 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\/other_side_of_the_world.htm?place=Sydney\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Onblur Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_yet_more.jpg\" title=\"Other Side of the World Onblur Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Onblur Tutorial<\/p><\/div>\n<p>The <a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'><i>onblur<\/i><\/a> event in web programming is a very important event regarding interactive keyboard entries made by the user.  We base new functionality, today, with our &#8220;Other Side of the World&#8221; web application, by allowing a user who enters in their own &#8220;place&#8221; information, can have that information filtered through the same &#8220;autocomplete&#8221; database provided by the wonderful <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> and its great API service.<\/p>\n<p>When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the <a target=_blank title='Event onkeyup information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onkeyup.asp'><i>onkeyup<\/i><\/a> keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box &#8230; hence the <i>onblur<\/i> event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same &#8230;<\/p>\n<ul>\n<li>placename<\/li>\n<li>country &#8230; linked to &#8230;<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; fields as talked about yesterday when we presented <a title='Other Side of the World Places Tutorial' href='#osowpt'>Other Side of the World Places Tutorial<\/a> as shown below.<\/p>\n<p>So that&#8217;s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-autocomplete-tutorial\/' title='Weather API via Iframe jQuery Ajax AutoComplete Tutorial'>Weather API via Iframe jQuery Ajax AutoComplete Tutorial<\/a> from some time back, the changes for which we&#8217;ll explain later.<\/p>\n<p>Again we call on <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html--GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html--GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our <i>onblur<\/i> event purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a> (or try out for a specific (argument) location, such as <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm?place=Darwin' title='other_side_of_the_world.htm'>Darwin try out<\/a>), again.  It also required small changes to &#8230;<\/p>\n<ul>\n<li>HTML of the &#8220;parent&#8221; you could call <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html---GETME'>autocomplete.htm<\/a> changed in <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html---GETME'>this way<\/a> and with this <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm'>live run<\/a> link (or specific place argument calls like the one here for <a target=_blank title='autocomplete.htm' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.htm?place=Darwin'>live run for Darwin<\/a> link) &#8230; and its &#8230;<\/li>\n<li>PHP autocomplete jQuery Ajax engined helper you could call <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php--GETME'>using_key.php<\/a> and tweaked in <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php--GETME'>this way<\/a>\n<\/ul>\n<hr>\n<p id='osowpt'>Previous relevant <a target=_blank title='Other Side of the World Places Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-places-tutorial\/'>Other Side of the World Places 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\/other_side_of_the_world.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Places Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world_more.jpg\" title=\"Other Side of the World Places Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Places Tutorial<\/p><\/div>\n<p>A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like &#8230;<\/p>\n<ol>\n<li>Sun Angle at noon<\/li>\n<li>Moon Angle at noon<\/li>\n<li>Coriolis Effect<\/li>\n<li>Distance between Geographical Locations<\/li>\n<li>Weather at Geographical Location<\/li>\n<\/ol>\n<p> &#8230; and that we eventually added some &#8220;placename&#8221; capabilities to all this, introduced with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-sun-angle-tutorial\/' title='PHP\/Javascript\/HTML Sun Angle Tutorial'>PHP\/Javascript\/HTML Sun Angle Tutorial<\/a>, which harnessed all this useful goodwill of <a target=_blank href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm'>this useful webpage<\/a> (thanks) publishing some placename geographicals data.<\/p>\n<ul>\n<li>placename<\/li>\n<li>country &#8230; linked to &#8230;<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; and that we &#8220;channel&#8221; today, via our beloved <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>Client Pre-emptive Iframe<\/a> techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added &#8220;placename&#8221; functionality to our &#8220;Other Side of the World&#8221; web application we started presenting yesterday with <a title='Other Side of the World Primer Tutorial' href='#osotwpt'>Other Side of the World Primer Tutorial<\/a> as shown below.<\/p>\n<p>Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an <i>onclick<\/i> event (after an <i>onchange<\/i> event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the &#8230;<\/p>\n<ul>\n<li>placename (, country) (Great Circle Distance in km away)<\/li>\n<li>latitude<\/li>\n<li>longitude<\/li>\n<\/ul>\n<p> &#8230; HTML input type=text and type=number fields automatically.  In the normal case of events in non-Firefox web browsers an <i>onchange<\/i> event change of value to a non-nothing value just causes that select element value to be one of the places shown on the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> that we display.<\/p>\n<p>The default is to show five of the nearest placenames in the derived list, but a &#8220;+&#8221; button can increase that number of &#8220;nearest&#8221;s as required.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.htm'>other_side_of_the_world.htm<\/a> (changed in <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html-GETME' title='other_side_of_the_world.html-GETME'>this way<\/a> for our purposes today) if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm' title='other_side_of_the_world.htm'>try out<\/a>, again perhaps?<\/p>\n<hr>\n<p id='osotwpt'>Previous relevant <a target=_blank title='Other Side of the World Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-primer-tutorial\/'>Other Side of the World Primer 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\/other_side_of_the_world.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Other Side of the World Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.jpg\" title=\"Other Side of the Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Other Side of the World Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a first draft of an &#8220;Other Side of the World&#8221; web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user &#8230;<\/p>\n<ul>\n<li>the position of the place that they enter in for their latitude and longitude &#8230; as well as &#8230;<\/li>\n<li>&#8220;the other side of the world&#8221; to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location<\/li>\n<\/ul>\n<p>Is this our &#8220;sister&#8221; location?  Am not sure.  But somebody was telling &#8220;Porkies&#8221; to me as a child where we were told &#8220;China&#8221; as being on the other side.<\/p>\n<p>The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html' title='other_side_of_the_world.html_GETME'>other_side_of_the_world.html<\/a> if you like, or want to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.html' title='other_side_of_the_world.html'>try out<\/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='#d28620' onclick='var dv=document.getElementById(\"d28620\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geographicals\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28620' 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='#d30966' onclick='var dv=document.getElementById(\"d30966\"); 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='d30966' 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='#d30981' onclick='var dv=document.getElementById(\"d30981\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onblur\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30981' 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='#d30998' onclick='var dv=document.getElementById(\"d30998\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30998' 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='#d44510' onclick='var dv=document.getElementById(\"d44510\"); 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='d44510' 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='#d44527' onclick='var dv=document.getElementById(\"d44527\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/error\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44527' 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='#d49708' onclick='var dv=document.getElementById(\"d49708\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/search\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49708' 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='#d53013' onclick='var dv=document.getElementById(\"d53013\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d53013' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We need to thank last Friday&#8217;s ABC The Drum episode&#8217;s last story about the wonderful Hummingsong Community Choir, in turn leading me to this Australia&#8217;s Got Talent YouTube video &#8230; &#8230; and onto some research into<\/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":[202,2276,367,587,3733,997,1670,1319,1369,1493,2017],"class_list":["post-53013","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-checkbox","tag-delimitation","tag-dropdown","tag-iframe","tag-keane","tag-programming","tag-synchronize","tag-tutorial","tag-video","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53013"}],"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=53013"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53013\/revisions"}],"predecessor-version":[{"id":53025,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/53013\/revisions\/53025"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=53013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=53013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=53013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}