{"id":67674,"date":"2025-03-21T03:01:00","date_gmt":"2025-03-20T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=67674"},"modified":"2025-03-21T14:29:25","modified_gmt":"2025-03-21T04:29:25","slug":"external-javascript-youtube-audio-of-video-looping-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-youtube-audio-of-video-looping-tutorial\/","title":{"rendered":"External Javascript YouTube Audio of Video Looping Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ytaudioonly_emoji_looping.jpg\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"External Javascript YouTube Audio of Video Looping Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ytaudioonly_emoji_looping.jpg\" title=\"External Javascript YouTube Audio of Video Looping Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">External Javascript YouTube Audio of Video Looping Tutorial<\/p><\/div>\n<p>Of yesterday&#8217;s <a title='External Javascript YouTube Audio of Video Emoji Tutorial' href='#ejytavet'>External Javascript YouTube Audio of Video Emoji Tutorial<\/a> &#8230;<\/p>\n<ol>\n<li>pause<\/li>\n<li>play<\/li>\n<li>loop<\/li>\n<li>stop<\/li>\n<li>progress <font size=1>&#8230; <strike>perhaps<\/strike>yes<\/font><\/li>\n<\/ol>\n<p> &#8230; list of suggested &#8220;controls&#8221; for our <i>Play Audio Stream of Selected YouTube Video In Place<\/i> functionality, am sure of most interest was the <i>loop<\/i> one.  Well, it certainly was for us, anyway.<\/p>\n<p>We weren&#8217;t sure whether we could get around the <i>actual tap needed<\/i> on mobile platforms to just apply &#8230;<\/p>\n<p><code><br \/>\n  player.seekTo(0);<br \/>\n  player.playVideo();<br \/>\n<\/code><\/p>\n<p> &#8230; as we near the end of the video.  Alas, no, we need the red button (ie. the transparent YouTube video) to be retapped to get anywhere &#8230; so sad.<\/p>\n<p>But non-mobile <font size=1>platform usages<\/font> can loop effectively, and might help out users, who, like me, occasionally get obsessed with a YouTube music video (such as <a target=\"_blank\" title=\"?\" class=\"audioytplay\" href='https:\/\/www.youtube.com\/watch?v=FtE3hoR_Nvo' rel=\"noopener\">Morricone &#8211; Gabriel&#8217;s Oboe from The Mission, Maja \u0141agowska &#8211; oboe, conducted by Andrzej Kucyba\u0142a<\/a>) &#8230; hence the radio and musical note emojis &#128251;&#127926; (&amp;#128251;&amp;#127926;) we started using yesterday.<\/p>\n<p>Another plan we had to ask for menu operations via a window.prompt a lot of users will be relieved to hear, didn&#8217;t work either, and so we had to redesign, finally settling on HTML <i>textarea<\/i> elements whereby &#8230;<\/p>\n<ul>\n<li>information and instructions are placed in its <i>placeholder<\/i> attribute &#8230; and &#8230;<\/li>\n<li>like a hotkey <font size=1>(but not needing <i>onkeydown<\/i> or <i>onkeyup<\/i> or <i>onkeypress<\/i> event logic intervention)<\/font> user audio <i>control<\/i> instructions <font color=blue>are unique regarding first character<\/font>, so way down at the grandchild level we have &#8230;<br \/>\n<code><br \/>\n      function playingvideo() {<br \/>\n          psuf='';<br \/>\n          if (startagain) {<br \/>\n             if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n             psuf=' via button reclick ' + String.fromCodePoint(10004);<br \/>\n             } else {<br \/>\n             psuf=' ' + String.fromCodePoint(10004);<br \/>\n             }<br \/>\n          }<br \/>\n          if (('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'').replace(\/\\#\/g,'') != '') {<br \/>\n            if (eval('' + duration) == 0 && Math.round(player.getCurrentTime()) &lt; 1) {<br \/>\n                   if (one == 1 || onepause != 1) {<br \/>\n                     if (1 == 4) { player.pauseVideo(); }<br \/>\n                   } else {<br \/>\n                     player.playVideo();<br \/>\n                   }<br \/>\n              setTimeout(playingvideo, 1000);<br \/>\n            } else {<br \/>\n            if (top.document.getElementById(location.hash.replace(\/\\#\/g,''))) {<br \/>\n              if (('' + top.document.getElementById(location.hash.replace(\/\\#\/g,'')).getAttribute('data-val')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value= top.document.getElementById(location.hash.replace(\/\\#\/g,'')).getAttribute('data-val');<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).setAttribute('data-val','');<br \/>\n              }<br \/>\n              <font color=blue>switch (('' + top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value.toUpperCase() + ' ').substring(0,1)) {<br \/>\n                 case 'L':<br \/>\n                   startagain=true;<br \/>\n          psuf='';<br \/>\n          if (startagain) {<br \/>\n             psuf=' ' + String.fromCodePoint(10004);<br \/>\n          }<br \/>\n                   dostumps=false;<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value='';<br \/>\n                   break;<br \/>\n<br \/>\n                 case 'S':<br \/>\n                   startagain=false;<br \/>\n          psuf='';<br \/>\n          if (startagain) {<br \/>\n             psuf=' ' + String.fromCodePoint(10004);<br \/>\n          }<br \/>\n                   dostumps=true;<br \/>\n                   player.stopVideo();<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value='';<br \/>\n                   break;<br \/>\n<br \/>\n                 case 'P':<br \/>\n                   if (one == 1 || onepause != 1) {<br \/>\n                     player.pauseVideo();<br \/>\n                   } else {<br \/>\n                     player.playVideo();<br \/>\n                   }<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value='';<br \/>\n                   break;<br \/>\n<br \/>\n                 case 'M':<br \/>\n                   player.mute();<br \/>\n                   mletter='M';<br \/>\n                   uletter='u';<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value='';<br \/>\n                   break;<br \/>\n<br \/>\n                 case 'U':<br \/>\n                   player.unMute();<br \/>\n                   mletter='m';<br \/>\n                   uletter='U';<br \/>\n                   top.document.getElementById(location.hash.replace(\/\\#\/g,'')).value='';<br \/>\n                   break;<br \/>\n    <br \/> <br \/>\n                 default:<br \/>\n                   break;<br \/>\n              }<\/font><br \/>\n              if (top.document.getElementById(location.hash.replace(\/\\#\/g,'')).placeholder.indexOf('\/') != -1) {<br \/>\n              if (startagain && eval(2 + Math.round(player.getCurrentTime())) &gt; eval('' + duration) && eval('' + duration) &gt; 0) {<br \/>\n                secscnt=eval(0.001 + duration);<br \/>\n                if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n                top.document.getElementById(location.hash.replace(\/\\#\/g,'')).setAttribute('data-loop','y');<br \/>\n                setTimeout(function(){<br \/>\n                  if (1 == 11) {<br \/>\n                  setTimeout(startVideo, playtime + delay);<br \/>\n                  setTimeout(playingvideo, 1900);<br \/>\n                  } else {<br \/>\n                  var huhc=false;<br \/>\n                  \/\/ huhc=confirm('Okay to loop?');<br \/>\n                  if (huhc && 1 == 7) {<br \/>\n                  player.seekTo(0.01);<br \/>\n                  secscnt=0.01;<br \/>\n                  oursecscnt=0.01;<br \/>\n                  player.playVideo();<br \/>\n                  setTimeout(playingvideo, 1900);<br \/>\n                  } else {<br \/>\n                  window.parent.focus();<br \/>\n                  parent.location.href=parent.document.URL.split('&random=')[0] + '&random=' + Math.floor(Math.random() * 1987865) + '&startagain=y' + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'').replace(\/^\\#$\/g,'');<br \/>\n                  }<br \/>\n                  } }, 1500);<br \/>\n                return '';<br \/>\n                } else {<br \/>\n                top.document.getElementById(location.hash.replace(\/\\#\/g,'')).setAttribute('data-loop','y');<br \/>\n                setTimeout(function(){  window.top.focus(); top.document.getElementById(location.hash.replace(\/\\#\/g,'').substring(3).split('_')[0]).click();   }, 1500);<br \/>\n                return '';<br \/>\n                }<br \/>\n              }<br \/>\n              if (one == 1 || onepause != 1) {<br \/>\n              if (eval('' + duration) == 0) { duration=player.getDuration();  }<br \/>\n              top.document.getElementById(location.hash.replace(\/\\#\/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '\/' + duration + ' ... ' + 'P=pause\/play S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;<br \/>\n              } else {<br \/>\n              if (eval('' + duration) == 0) { duration=player.getDuration();  }<br \/>\n              top.document.getElementById(location.hash.replace(\/\\#\/g,'')).placeholder='' + Math.round(player.getCurrentTime()) + '\/' + duration + ' ... ' + 'P=play\/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute L=loop' + psuf;<br \/>\n              }<br \/>\n              setTimeout(playingvideo, 1000);<br \/>\n              }<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n      }<br \/>\n<\/code><br \/>\n &#8230; does a good job acting like those keyboard events\n<\/li>\n<\/ul>\n<p> &#8230; for <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js---GETME\" rel=\"noopener\">today&#8217;s fourth draft<\/a> external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js---GETME\" rel=\"noopener\">ytaudioonly.js<\/a> external Javascript supports <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> calling <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a> in our quest to play YouTube audio &#8220;in place&#8221; in a useful way.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p><strike>Un<\/strike>Less attended mobile looping can work with the kludge (we suspect our bug or code design flaw) &#8230;<\/p>\n<p><code><br \/>\n  player.seekTo(1);<br \/>\n  player.playVideo();<br \/>\n<\/code><\/p>\n<p> &#8230; and we hope nobody&#8217;s playing &#8220;Name That Sound&#8221; with the replays.<\/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\/external-javascript-youtube-audio-of-video-looping-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Looping Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ejytavet'>Previous relevant <a target=\"_blank\" title='External Javascript YouTube Audio of Video Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-youtube-audio-of-video-emoji-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Emoji 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\/ytaudioonly_emoji_usage.jpg\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"External Javascript YouTube Audio of Video Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ytaudioonly_emoji_usage.jpg\" title=\"External Javascript YouTube Audio of Video Emoji Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">External Javascript YouTube Audio of Video Emoji Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='External Javascript YouTube Audio of Video Mobile Helper Tutorial' href='#ejytavmht'>External Javascript YouTube Audio of Video Mobile Helper Tutorial<\/a>, today, we&#8217;ve &#8230;<\/p>\n<ul>\n<li>further shored up the mobile platform playing of the audio stream of a YouTube video, as requested &#8230;<\/li>\n<li>added display <font size=1>(usefulness only, so far)<\/font> emojis &#128251;&#127926; (&amp;#128251;&amp;#127926;) into the &#8220;underlay&#8221; button displays, as today&#8217;s work, leading up to, tomorrow &#8230;<\/li>\n<li>the emoji tap\/clicks will lead the user to a menu of further options (as often displayed with video controls) &#8230;\n<ol>\n<li>pause<\/li>\n<li>play<\/li>\n<li>loop<\/li>\n<li>stop<\/li>\n<li>progress <font size=1>&#8230; perhaps<\/font><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; where <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js--GETME\" rel=\"noopener\">today&#8217;s third draft<\/a> external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js--GETME\" rel=\"noopener\">ytaudioonly.js<\/a> external Javascript supports <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> in our quest to play YouTube audio &#8220;in place&#8221; in a useful way.<\/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\/external-javascript-youtube-audio-of-video-emoji-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ejytavmht'>Previous relevant <a target=\"_blank\" title='External Javascript YouTube Audio of Video Mobile Helper Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-youtube-audio-of-video-mobile-helper-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Mobile Helper 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\/ytaudioonly_mobile_usage.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"External Javascript YouTube Audio of Video Mobile Helper Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ytaudioonly_mobile_usage.gif\" title=\"External Javascript YouTube Audio of Video Mobile Helper Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">External Javascript YouTube Audio of Video Mobile Helper Tutorial<\/p><\/div>\n<p>After the start yesterday&#8217;s <a title='External Javascript YouTube Audio of Video Helper Tutorial' href='#ejytavht'>External Javascript YouTube Audio of Video Helper Tutorial<\/a> gave us with our External Javascript YouTube Audio of Video Helper we&#8217;ve progressed making the mobile platform interfacing less flaky, but more testing is needed.<\/p>\n<p>Introducing a general delay into <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\">our 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> part of the solution turned things around here.<\/p>\n<p>To delay, say by 13.5 seconds, even great swathes of code &#8230;<\/p>\n<p><code><br \/>\n    <a target=\"_blank\" title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp' rel=\"noopener\"><i>setTimeout<\/i><\/a>(function(){<br \/>\n      \/\/ Start of \"great swathes of code\"<br \/>\n      \/\/ ...<br \/>\n      \/\/ End of \"great swathes of code\"<br \/>\n   }, 13500);<br \/>\n<\/code><\/p>\n<p> &#8230; is one of those ideas we&#8217;re still pinching ourselves about how effective it can be <font size=1>(let alone passing in arguments at the <i>function()<\/i> bit)<\/font>.  We&#8217;re forever filling &#8220;great swathes of code&#8221; with global Javascript var<font size=1>iables<\/font> but today&#8217;s &#8220;great swathe&#8221; works okay with non global Javascript var<font size=1>iables<\/font> in there, and we&#8217;re thinking we have to be more trusting of the brilliant <i>setTimeout<\/i> (and <i>setInterval<\/i>) Javascript techniques of introducing a delay into the flow of your Javascript.  Of course, we could also delay the work until the document.body <i>onload<\/i> event, but we wanted to get in early with what the code is trying to achieve here &#8230; we&#8217;ll see.<\/p>\n<p>Perhaps a good adage here is &#8230;<\/p>\n<blockquote><p>\nTrust the process.<br \/>\nTrust the wonders of (in the case of iOS, Safari) Web Browser Web Inspector debugging to test ideas you start out being unsure of.\n<\/p><\/blockquote>\n<p> &#8230; with our ongoing <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js-GETME\" rel=\"noopener\">second draft<\/a> external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js-GETME\" rel=\"noopener\">ytaudioonly.js<\/a> external Javascript ongoing current project &#8230; so <span><a target=\"_blank\" title=\"?\" class=\"audioytplay\" href='https:\/\/www.youtube.com\/watch?v=IcrbM1l_BoI' rel=\"noopener\">Wake Me Up<\/a><\/span> <span><a target=\"_blank\" class=\"audioytplay\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=pIgZ7gMze7A' rel=\"noopener\">Before You Go-Go<\/a><\/span>.<\/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\/external-javascript-youtube-audio-of-video-mobile-helper-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Mobile Helper Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ejytavht'>Previous relevant <a target=\"_blank\" title='External Javascript YouTube Audio of Video Helper Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-youtube-audio-of-video-helper-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Helper 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\/ytaudioonly_usage.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"External Javascript YouTube Audio of Video Helper Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ytaudioonly_usage.gif\" title=\"External Javascript YouTube Audio of Video Helper Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">External Javascript YouTube Audio of Video Helper Tutorial<\/p><\/div>\n<p>It is not that surprising that the next step onto the progress of yesterday&#8217;s <a title='Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial' href='#mcmgcgcmit'>Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial<\/a> would involve us developing&#8230;<\/p>\n<ul>\n<li>an external Javascript &#8230;<\/li>\n<li>helper for &#8220;in place&#8221; &#8230;<\/li>\n<li>audio play &#8230;<\/li>\n<li>of that stream of a <a target=\"_blank\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video &#8230; via &#8230;<\/li>\n<li>user linked script call &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript' src='\/\/www.rjmprogramming.com.au\/ytaudioonly.js'&gt;&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; helping out &#8230;<\/li>\n<li>HTML &#8220;a&#8221; link <font color=blue>with<\/font> class=audioytplay and a mention of https:\/\/www.youtube.com\/watch?v=[YouTubeID] &#8230; eg.<br \/>\n<code><br \/>\n&lt;p&gt;Oops, <font color=blue>&lt;a class=\"audioytplay\" target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=gBzJGckMYO4' rel=\"noopener\"&gt;&lt;strike&gt;that's all&lt;\/strike&gt;sorry, folks&lt;\/a&gt;<\/font>&lt;\/p&gt;<br \/>\n<\/code>\n<\/li>\n<li>to be, via <i>onclick<\/i> event, playing &#8220;in place&#8221; the audio part of that YouTube referenced [YouTubeID] video<\/li>\n<\/ul>\n<p>Developing this is definitely more than a one day job (especially getting mobile platforms working), but today&#8217;s &#8220;first draft&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js_GETME\" rel=\"noopener\">ytaudioonly.js<\/a> external Javascript, along with the help of &#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><\/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; is our start to this project.  Try it yourself below &#8230;<\/p>\n<p><code><\/p>\n<p>Oops, <font color=blue><a class=\"audioytplay\" target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=gBzJGckMYO4' rel=\"noopener\"><strike>that's all<\/strike>sorry, folks<\/a><\/font><\/p>\n<p><\/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\/external-javascript-youtube-audio-of-video-helper-tutorial\/' rel=\"noopener\">External Javascript YouTube Audio of Video Helper Tutorial<\/a>.<\/p-->\n<hr>\n<p id='mcmgcgcmit'>Previous relevant <a target=\"_blank\" title='Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/making-of-clickaround-maps-google-chart-geo-chart-mobile-integration-tutorial\/' rel=\"noopener\">Making of Clickaround Maps Google Chart Geo Chart Mobile Integration 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\/clickarounds_making_of.mp4\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clickarounds_making_of.png\" title=\"Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial<\/p><\/div>\n<p>As far as CSS styling goes with our web application work, personally speaking, it is one of &#8230;<\/p>\n<blockquote title=\"As my Under 7's football coach used to say.\"><p>\nGive it a bit of oompha!\n<\/p><\/blockquote>\n<p> &#8230; moments in coding we think we learn more from, than reading about CSS.  That, and, usually <a target=\"_blank\" href='\/\/stackoverflow.com' title=\"StackOverflow\" rel=\"noopener\">StackOverflow<\/a>, thanks, where examples of achieving some styling ambition teach us a lot too.<\/p>\n<p>Yesterday, with <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/clickaround-maps-google-chart-geo-chart-mobile-integration-tutorial-2\/' title='Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial' rel=\"noopener\">Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial<\/a>, we decided to &#8220;put a bit of oompha&#8221; into that &#8220;two bell emoji&#8221; ( ie. &#128276;&#128276; ) link &#8220;double buzzer&#8221; sound &#8220;production number&#8221;, and wanted to break down what we ended up with, for readers &#8230;<\/p>\n<table>\n<tr>\n<th>Our first try &#8230; okay for non-mobile &#8230; not as good for mobile &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:8px;word-break:break-all;text-wrap:wrap;><br \/>\n&lt;a id=\"aja\" target=\"myja\" title=\"\" onmouseover=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title=' ';  this.target='myja'; } \" onclick=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) &amp;&amp; this.title == '') {  this.title=' ';  this.target='myja';  document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100);\" href=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&amp;jusJUNKtaudio=&amp;youtube_duration=2.000&amp;email=&amp;email=&amp;emoji=on&amp;c0=on&amp;i0=0&amp;j0=2&amp;i1=&amp;j1=&amp;i2=&amp;j2=&amp;i3=&amp;j3=&amp;i4=&amp;j4=&amp;i5=&amp;j5=&amp;i6=&amp;j6=&amp;i7=&amp;j7=&amp;i8=&amp;j8=&amp;i9=&amp;j9=&amp;i10=&amp;j10=&amp;i11=&amp;j11=&amp;i12=&amp;j12=&amp;i13=&amp;j13=&amp;i14=&amp;j14=&amp;i15=&amp;j15=&amp;i16=&amp;j16=&amp;i17=&amp;j17=&amp;i18=&amp;j18=&amp;i19=&amp;j19=&amp;i20=&amp;j20=&amp;i21=&amp;j21=&amp;i22=&amp;j22=&amp;i23=&amp;j23=&amp;i24=&amp;j24=&amp;i25=&amp;j25=&amp;i26=&amp;j26=&amp;i27=&amp;j27=&amp;i28=&amp;j28=&amp;i29=&amp;j29=\" rel=\"noopener\"&gt;&amp;#128276;&amp;#128276;&lt;\/a&gt;<br \/>\n<iframe id=\"myja\" name=\"myja\" src=\"\/About_Us.html\" style=\"display:none;\"><\/iframe><br \/>\n<\/code><\/p>\n<p> &#8230; begets &#8230;<\/p>\n<p><a id=\"xaja\" target=\"xmyja\" title=\"\" onmouseover=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title=' ';  this.target='xmyja'; } \" onclick=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) { this.title == '') {  this.title=' ';  this.target='xmyja';  document.getElementById('xmyja').src=this.href; } setTimeout(function(){ document.getElementById('xaja').target='_blank'; },100); }\" href=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&#038;justJUNKaudio=&#038;youtube_duration=2.000&#038;email=&#038;email=&#038;emoji=on&#038;c0=on&#038;i0=0&#038;j0=2&#038;i1=&#038;j1=&#038;i2=&#038;j2=&#038;i3=&#038;j3=&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9=&#038;i10=&#038;j10=&#038;i11=&#038;j11=&#038;i12=&#038;j12=&#038;i13=&#038;j13=&#038;i14=&#038;j14=&#038;i15=&#038;j15=&#038;i16=&#038;j16=&#038;i17=&#038;j17=&#038;i18=&#038;j18=&#038;i19=&#038;j19=&#038;i20=&#038;j20=&#038;i21=&#038;j21=&#038;i22=&#038;j22=&#038;i23=&#038;j23=&#038;i24=&#038;j24=&#038;i25=&#038;j25=&#038;i26=&#038;j26=&#038;i27=&#038;j27=&#038;i28=&#038;j28=&#038;i29=&#038;j29=\" rel=\"noopener\">&#128276;&#128276;<\/a><br \/>\n<iframe id=\"xmyja\" name=\"xmyja\" src=\"\/About_Us.html\" style=\"display:none;\"><\/iframe><\/p>\n<\/td>\n<\/tr>\n<tr>\n<th>Our second try &#8230; okay for non-mobile &#8230; better for mobile &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:8px;word-break:break-all;text-wrap:wrap;><br \/>\n&lt;a id=\"aja\" target=\"myja\" title=\"\" onmouseover=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title=' ';  this.target='myja'; } \" onclick=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) { this.title == '') {  this.title=' ';  this.target='myja';  document.getElementById('myja').src=this.href; }  setTimeout(function(){ document.getElementById('aja').target='_blank'; },100); }\" href=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&justJUNKaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&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=\" rel=\"noopener\"&gt;&amp;#128276;&amp;#128276;&lt;\/a&gt;<br \/>\n&lt;iframe onload=\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { if (this.src.indexOf('About_Us.') != -1) { document.getElementById('aja').target='myja';<br \/>\n this.src=document.getElementById('aja').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \" id=\"myja\" name=\"myja\" src=\"\/About_Us.html\" style=\"display:none;\"&gt;&lt;\/iframe&gt;<br \/>\n <\/code><\/p>\n<p> &#8230; begets &#8230; <\/p>\n<p><a id=\"aja\" target=\"_blank\" title=\"\" onmouseover=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title=' ';  this.target='myja'; } \" onclick=\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) &#038;&#038; this.title == '') {  this.title=' ';  this.target='myja';  document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100);\" href=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&#038;justaJUNKudio=&#038;youtube_duration=2.000&#038;email=&#038;email=&#038;emoji=on&#038;c0=on&#038;i0=0&#038;j0=2&#038;i1=&#038;j1=&#038;i2=&#038;j2=&#038;i3=&#038;j3=&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9=&#038;i10=&#038;j10=&#038;i11=&#038;j11=&#038;i12=&#038;j12=&#038;i13=&#038;j13=&#038;i14=&#038;j14=&#038;i15=&#038;j15=&#038;i16=&#038;j16=&#038;i17=&#038;j17=&#038;i18=&#038;j18=&#038;i19=&#038;j19=&#038;i20=&#038;j20=&#038;i21=&#038;j21=&#038;i22=&#038;j22=&#038;i23=&#038;j23=&#038;i24=&#038;j24=&#038;i25=&#038;j25=&#038;i26=&#038;j26=&#038;i27=&#038;j27=&#038;i28=&#038;j28=&#038;i29=&#038;j29=\" rel=\"noopener\">&#128276;&#128276;<\/a><br \/>\n<iframe onload=\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('aja').target='myja';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('aja').target='myja';  \n this.src=document.getElementById('aja').href + '&#038;rand=' + Math.floor(Math.random() * 1989786); } } \" id=myja name=myja src=\/About_Us.html style=display:none;><\/iframe><\/p>\n<p> &#8230; working better because of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------GETME\" rel=\"noopener\">tweaked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <br \/><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a>&#8216;s <font color=blue>new<\/font> &#8230;<\/p>\n<p><code style=font-size:8px;word-break:break-all;text-wrap:wrap;><br \/>\n  if (window.top) {<br \/>\n    <font color=blue>if (document.URL.indexOf('youtubeid=7XMW6Z_Oq38&') != -1 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      setTimeout(function(){<br \/>\n       if (document.getElementById('audioejkaraoke')) {<br \/>\n       document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;<br \/>\n       document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);<br \/>\n       document.getElementById('audioejkaraoke').style.position='absolute';<br \/>\n       document.getElementById('audioejkaraoke').style.left='0px';<br \/>\n       document.getElementById('audioejkaraoke').style.top='0px';<br \/>\n       document.getElementById('audioejkaraoke').style.backgroundColor='transparent';<br \/>\n       document.getElementById('audioejkaraoke').style.zIndex='99';<br \/>\n          document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);<br \/>\n          document.getElementById('repeat').style.position='absolute';<br \/>\n          document.getElementById('repeat').style.left='0px';<br \/>\n          document.getElementById('repeat').style.top='-10px';<br \/>\n          document.getElementById('repeat').style.backgroundColor='transparent';<br \/>\n          document.getElementById('repeat').style.zIndex='199';<br \/>\n          document.getElementById('myiframe').style.position='absolute';<br \/>\n          document.getElementById('myiframe').style.left='-100px';<br \/>\n          document.getElementById('myiframe').style.top='-100px';<br \/>\n          document.getElementById('myiframe').style.zIndex='299';<br \/>\n          \/\/document.getElementById('myiframe').style.backgroundColor='transparent';<br \/>\n          document.getElementById('myiframe').style.opacity='0.0';<br \/>\n          if (aaconto) {<br \/>\n          aaconto.getElementById('player').style.opacity='0.0';<br \/>\n          } else {<br \/>\n          aaset=true;<br \/>\n          }<br \/>\n          document.body.style.backgroundColor='transparent';<br \/>\n       } else {<br \/>\n       setInterval(function(){<br \/>\n         if (document.getElementById('audioejkaraoke')) {<br \/>\n          if (('' + document.getElementById('audioejkaraoke').title + ' ').substring(0,1) != ' ') {<br \/>\n          document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;<br \/>\n          document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);<br \/>\n          document.getElementById('audioejkaraoke').style.position='absolute';<br \/>\n          document.getElementById('audioejkaraoke').style.left='0px';<br \/>\n          document.getElementById('audioejkaraoke').style.top='0px';<br \/>\n          document.getElementById('audioejkaraoke').style.backgroundColor='transparent';<br \/>\n          document.getElementById('audioejkaraoke').style.zIndex='99';<br \/>\n          document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);<br \/>\n          document.getElementById('repeat').style.position='absolute';<br \/>\n          document.getElementById('repeat').style.left='0px';<br \/>\n          document.getElementById('repeat').style.top='-10px';<br \/>\n          document.getElementById('repeat').style.backgroundColor='transparent';<br \/>\n          document.getElementById('repeat').style.zIndex='199';<br \/>\n          document.getElementById('myiframe').style.position='absolute';<br \/>\n          document.getElementById('myiframe').style.left='-100px';<br \/>\n          document.getElementById('myiframe').style.top='-100px';<br \/>\n          document.getElementById('myiframe').style.zIndex='299';<br \/>\n          \/\/document.getElementById('myiframe').style.backgroundColor='transparent';<br \/>\n          document.getElementById('myiframe').style.opacity='0.0';<br \/>\n          if (aaconto) {<br \/>\n          aaconto.getElementById('player').style.opacity='0.0';<br \/>\n          } else {<br \/>\n          aaset=true;<br \/>\n          }<br \/>\n          document.body.style.backgroundColor='transparent';<br \/>\n          }<br \/>\n         }<br \/>\n       }, 1000);<br \/>\n       }<br \/>\n       if (top.document.getElementById('aja')) {<br \/>\n       var boxis=top.document.getElementById('aja').getBoundingClientRect();<br \/>\n       \/\/alert('boxis.left=' + boxis.left + ' ' + top.document.getElementById('aja').innerHTML);<br \/>\n       if (top.document.getElementById('aja').innerHTML.indexOf('&lt;iframe') == -1) {<br \/>\n       \/\/alert('Boxis.left=' + boxis.left);<br \/>\n       top.document.getElementById('myja').style.width='' + eval(2 * boxis.width) + 'px';<br \/>\n       top.document.getElementById('myja').style.height='' + eval(1 * boxis.height) + 'px';<br \/>\n       setTimeout(function(){<br \/>\n       top.document.getElementById('aja').innerHTML=top.document.getElementById('myja').outerHTML.replace('\/About_Us.html',top.document.getElementById('aja').href).replace(' onload=',' data-onload=').replace(' id=',' data-id=').replace(' name=',' name-id=').replace('none;','inline-block;');<br \/>\n       }, 2000);<br \/>\n       } else if (3 == 4) {<br \/>\n       top.document.getElementById('myja').style.position='absolute';<br \/>\n       top.document.getElementById('myja').style.left='' + boxis.left + 'px';<br \/>\n       top.document.getElementById('myja').style.top='' + boxis.top + 'px';<br \/>\n       top.document.getElementById('myja').style.width='' + boxis.width + 'px';<br \/>\n       top.document.getElementById('myja').style.height='' + boxis.height + 'px';<br \/>\n       top.document.getElementById('myja').style.display='block';<br \/>\n       top.document.getElementById('myja').style.zIndex='99';<br \/>\n       \/\/top.document.getElementById('aja').innerHTML='&nbsp;&nbsp;';<br \/>\n       }<br \/>\n       }<br \/>\n      }, 1000);<br \/>\n    }<\/font><br \/>\n    if (top.document.URL.indexOf('\/esp_ornot_esp.') != -1 || parent.document.URL.indexOf('\/esp_ornot_esp.') != -1) {<br \/>\n      if (top.document.title.indexOf(' justaudio ') != -1) {<br \/>\n        asuffis='&justaudio=&';<br \/>\n        bsuffis=' name=justaudio ';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>Let&#8217;s start with &#8230;<\/p>\n<blockquote><p>\nWhy can&#8217;t we just link to a <a target=\"_blank\" title=\"YouTube\" href='\/\/youtube.com' rel=\"noopener\">YouTube<\/a> <a target=\"_blank\" title=\"YouTube Buzzer video, thanks\" href='https:\/\/www.youtube.com\/watch?v=7XMW6Z_Oq38' rel=\"noopener\">video<\/a> URL webpage off any old platform or web browser incarnation?\n<\/p><\/blockquote>\n<p>Well, you could!  But we wanted a less obvious approach <font size=1>(and we were not sure about mobile platforms, trying this)<\/font>, only relevant for scenarios where you are only interested in the audio stream of a YouTube video <font size=1>(it should be noted)<\/font>, that is hiding from the reader &#8220;the mechanics&#8221; of what we are doing <font size=2>(to get a cheap giggle<\/font><font size=1> &#8230; there, are you happy now?!<\/font><font size=1>)<\/font>.<\/p>\n<blockquote style=word-break:break-all;text-wrap:wrap;><p>\nWhat does Javascript <i>if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  }<\/i> if test achieve?\n<\/p><\/blockquote>\n<p>If this test returns <i>true<\/i> we have detected a non-mobile platform\/web browser scenario.<\/p>\n<blockquote><p>\nWhat does the HTML <i>target<\/i> attribute of an <i>a<\/i> HTML element do?\n<\/p><\/blockquote>\n<p>That <i>target<\/i> attribute determines the &#8220;navigational place&#8221; of the <i>href<\/i> attribute URL of that <i>a<\/i> link where &#8230;<\/p>\n<ol>\n<li><i>_blank<\/i> opens in a new window<\/li>\n<li><i>_self<\/i> clobbers current window<\/li>\n<li><i>_top<\/i> adds a new (tabbed) window (perhaps from the viewpoint of a child HTML iframe window)<\/li>\n<li>other named <i>target<\/i> point to the <i>name<\/i> attribute of an HTML iframe element, presumably, in the current window<\/li>\n<\/ol>\n<blockquote style=word-break:break-all;text-wrap:wrap;><p>\nWhat does HTML code snippet <font size=1> onload=&#8221;if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { if (this.src.indexOf(&#8216;About_Us.&#8217;) != -1) { document.getElementById(&#8216;aja&#8217;).target=&#8217;myja&#8217;;<br \/>\n this.src=document.getElementById(&#8216;aja&#8217;).href + &#8216;&amp;rand=&#8217; + Math.floor(Math.random() * 1989786); } } &#8220;<\/font> do as the onload event logic of the &#8220;second version&#8221; iframe incarnation?\n<\/p><\/blockquote>\n<p>We decided that we needed to get assistance from <a target=\"_blank\" title='Inhouse URL' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&#038;justaJUNKudio=&#038;youtube_duration=2.000&#038;email=&#038;email=&#038;emoji=on&#038;c0=on&#038;i0=0&#038;j0=2&#038;i1=&#038;j1=&#038;i2=&#038;j2=&#038;i3=&#038;j3=&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9=&#038;i10=&#038;j10=&#038;i11=&#038;j11=&#038;i12=&#038;j12=&#038;i13=&#038;j13=&#038;i14=&#038;j14=&#038;i15=&#038;j15=&#038;i16=&#038;j16=&#038;i17=&#038;j17=&#038;i18=&#038;j18=&#038;i19=&#038;j19=&#038;i20=&#038;j20=&#038;i21=&#038;j21=&#038;i22=&#038;j22=&#038;i23=&#038;j23=&#038;i24=&#038;j24=&#038;i25=&#038;j25=&#038;i26=&#038;j26=&#038;i27=&#038;j27=&#038;i28=&#038;j28=&#038;i29=&#038;j29=' rel=\"noopener\">our inhouse YouTube video interfacing player<\/a>, when it came to mobile platforms and web browsers, to get to a point where &#8230;<\/p>\n<ul>\n<li>unbeknown to <font size=1>such mobile<\/font> users<\/li>\n<li>when they tap the &#128276;&#128276; &#8220;buzzer&#8221; button emojis &#8230;<\/li>\n<li>it is arranged from the child iframe inhouse YouTube video interfacing player web application using <a target=\"_blank\" title='Overlay related blog postings around here' href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" rel=\"noopener\">&#8220;overlay&#8221;<\/a> concepts &#8230;\n<ol>\n<li>position: absolute<\/li>\n<li>opacity<\/li>\n<li>z-index<\/li>\n<li>top and left positioning<\/li>\n<li>width and height dimensioning<\/li>\n<li>&#128276;&#128276; into some button content\n<\/ol>\n<p> &#8230; that what they are tapping is a YouTube video element\n<\/li>\n<li>looking like &#128276;&#128276; at levels of a smaller z-index seen through opacity:0.0 higher z-index levels, the topmost transparent but high z-index one being the YouTube video element which is that webpage area&#8217;s &#8220;action item&#8221; <font size=1>&#8230; if you will<\/font><\/li>\n<\/ul>\n<blockquote><p>\nHuh?!\n<\/p><\/blockquote>\n<p>On mobile platforms, media cannot play, these days, unless it is as a direct result of a user tap (excluding programmatically produced taps).  See all this in action, with thanks to <a target=\"_blank\" title=\"FreeConvert\" href='http:\/\/www.freeconvert.com\/mov-to-mp4\/download' rel=\"noopener\">FreeConvert<\/a>, below &#8230;<\/p>\n<p><video style=\"width:100%;\" title='Making of making of ...' controls><source src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/clickarounds_making_of.mp4' tyle='video\/mp4'><\/source><\/video><\/p>\n<p>And so, yes &#8230; was it worth it?  Perhaps not to do with the job at hand, but for future reference, we&#8217;re happy to give this added <i>oompha<\/i> to this effort.<\/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='#d67558' onclick='var dv=document.getElementById(\"d67558\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67558' 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='#d67637' onclick='var dv=document.getElementById(\"d67637\"); 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='d67637' 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='#d67647' onclick='var dv=document.getElementById(\"d67647\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/delay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67647' 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='#d67666' onclick='var dv=document.getElementById(\"d67666\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67666' 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='#d67674' onclick='var dv=document.getElementById(\"d67674\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67674' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Of yesterday&#8217;s External Javascript YouTube Audio of Video Emoji Tutorial &#8230; pause play loop stop progress &#8230; perhapsyes &#8230; list of suggested &#8220;controls&#8221; for our Play Audio Stream of Selected YouTube Video In Place functionality, am sure of most interest &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-youtube-audio-of-video-looping-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":[1885,1835,113,174,2525,211,260,5138,305,307,2380,327,385,3606,5137,1619,518,2258,573,2666,576,587,590,592,614,626,652,673,3272,1807,2205,745,760,795,817,5056,870,876,894,2411,3735,932,2362,1988,997,1915,1125,1126,1168,1545,1200,3224,1262,1283,1292,1319,5139,1345,1369,2099,2257,1493,1496],"class_list":["post-67674","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-argument","tag-arguments","tag-audio","tag-button","tag-child","tag-click","tag-control","tag-controls","tag-debug","tag-debugging","tag-delay","tag-did-you-know","tag-emoji","tag-emoji-button","tag-freeconvert","tag-geo-chart","tag-google-chart","tag-height","tag-hotkey","tag-href","tag-html","tag-iframe","tag-image","tag-image-map","tag-integration","tag-ios","tag-javascript","tag-keyboard","tag-left","tag-link","tag-loop","tag-map","tag-media","tag-mobile","tag-mp4","tag-mute","tag-onload","tag-opacity","tag-overlay","tag-parent","tag-pause","tag-php","tag-play","tag-position","tag-programming","tag-progress","tag-setinterval","tag-settimeout","tag-software-integration","tag-stackoverflow","tag-stop-press","tag-stream","tag-textarea","tag-timing","tag-top","tag-tutorial","tag-unmute","tag-url","tag-video","tag-web-inspector","tag-width","tag-youtube","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67674"}],"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=67674"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67674\/revisions"}],"predecessor-version":[{"id":67695,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67674\/revisions\/67695"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=67674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=67674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=67674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}