{"id":69609,"date":"2025-08-25T03:01:00","date_gmt":"2025-08-24T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69609"},"modified":"2025-08-25T07:39:56","modified_gmt":"2025-08-24T21:39:56","slug":"youtube-api-caller-other-media-phase-two-iframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-phase-two-iframe-tutorial\/","title":{"rendered":"YouTube API Caller Other Media Phase Two Iframe 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#http\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Phase Two Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/iframe_via_popup.gif\" title=\"YouTube API Caller Other Media Phase Two Iframe Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Phase Two Iframe Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='YouTube API Caller Other Media Phase Two Interfacing Tutorial' href='#ytapicomptit'>YouTube API Caller Other Media Phase Two Interfacing Tutorial<\/a> featured the use of &#8230;<\/p>\n<ul>\n<li>popup windows &#8230; much maligned &#8230; so if there is a way we can transfer to the less maligned &#8230;<\/li>\n<li>iframe<\/li>\n<\/ul>\n<p> &#8230; keeping the work within the one window, that would be good, yes?  Happily, yes is the go, and with little bother too, with referencing code structure like &#8230;<\/p>\n<p><code><br \/>\n function feedoff(intr, compduris, comptitleis) {<br \/>\n    var iqw=0;<br \/>\n  if (window.parent != window.self) {<br \/>\n            if (window.parent.window.opener) {<br \/>\n              \/\/alert('vHere ' + ivid);<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n              \/\/alert('Here ' + ivid);<br \/>\n              window.parent.window.opener.nonytopen(ivid, compduris, comptitleis);<br \/>\n            } else {<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n              \/\/alert('gere ' + ivid);<br \/>\n              parent.nonytopen(ivid, compduris, comptitleis);<br \/>\n            }<br \/>\n   \/\/} else {<br \/>\n   \/\/  alert('therE');<br \/>\n   }<br \/>\n   return intr;<br \/>\n }<br \/>\n <br \/>\n function localended(avo) {<br \/>\n   var iqw=0;<br \/>\n   if (window.parent) {<br \/>\n     if (parent.document.URL.indexOf('tbox=') != -1) {<br \/>\n            if (window.parent.window.opener) {<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n              setTimeout(function() {  parent.window.opener.document.getElementById('j' + parent.document.URL.split('tbox=')[1].split('&')[0]).value='' + Math.ceil(eval('' + contdurs[whichnonyt(eval(-1 + contstarts.length))])) + '.00'; parent.document.getElementById('mytopspan').innerHTML='You can close me now ... ' + parent.document.getElementById('mytopspan').innerHTML; parent.window.opener.focus(); parent.window.opener.backtobase(); parent.window.opener.focus(); duration=-1; aminytnon=false; player=altplayer;  }, 1000);<br \/>\n        <br \/>\n              \/\/window.close();<br \/>\n            }<br \/>\n     } else if (parent.document.URL.indexOf('\/karaoke_youtube_api.htm') != -1) {<br \/>\n              iqw=0;<br \/>\n              while (parent.document.getElementById('i' + iqw)) {<br \/>\n              if (parent.document.getElementById('i' + iqw).value.indexOf('cannotenda2') != -1) {<br \/>\n                  vidarrv[iqw]='cannotenda2';<br \/>\n              }<br \/>\n              iqw++;<br \/>\n              }<br \/>\n       if (('' + parent.document.URL + 's').replace(\/\\#https\/g,'') != ('' + parent.document.URL + 's')) {<br \/>\n         aminytnon=false;<br \/>\n         player=altplayer;<br \/>\n         duration=-9999;<br \/>\n         playingvideo(); \/\/setTimeout(playingvideo, 800);<br \/>\n       }<br \/>\n     } else if ('blog' != 'blog') {<br \/>\n       parent.document.title='Finished ' + avo.outerHTML.substring(1).split(' ')[0];<br \/>\n     }<br \/>\n   }<br \/>\n <br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; essentially unaffected by the pretty dramatic change of window usage configuration.   Cute, huh?!  But how is this made to happen?  It&#8217;s really simple, really, as the second parameter of window.open can point to an iframe name attribute &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe name=radioif id=radioif data-laterclick=\"\" data-position=relative data-top=0 data-left=0 data-width=0 data-height=0 data-z=-999 style=display:none; src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then we can wrap <a target=\"_blank\" title='Window.open method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' rel=\"noopener\">window.open<\/a> calls, in amongst very <a target=\"_blank\" title='Overlay blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' rel=\"noopener\">&#8220;overlay&#8221;<\/a> minded Javascript code, into our new inhouse &#8220;function windowopen&#8221; &#8230;<\/p>\n<p><code><br \/>\nfunction windowopen(w1,w2,w3) {<br \/>\n  if (('' + document.getElementById('radioif').getAttribute('data-height')) == '0') {<br \/>\n   document.getElementById('radioif').setAttribute('data-height', '' + document.getElementById('tablenmup').getBoundingClientRect().top);<br \/>\n   document.getElementById('radioif').setAttribute('data-width', '' + screen.width);<br \/>\n   document.getElementById('radioif').setAttribute('data-top', '' + document.getElementById('tablenmup').getBoundingClientRect().top);<br \/>\n  }<br \/>\n  if (document.getElementById('xx' + nextwoin).outerHTML.indexOf('green') != -1) {<br \/>\n  document.getElementById('radioif').style.position='absolute';<br \/>\n  document.getElementById('radioif').style.top='0px';<br \/>\n  document.getElementById('radioif').style.left='0px';<br \/>\n  document.getElementById('radioif').style.width='' + document.getElementById('radioif').getAttribute('data-width') + 'px';<br \/>\n  document.getElementById('radioif').style.height='' + document.getElementById('radioif').getAttribute('data-height') + 'px';<br \/>\n  document.getElementById('radioif').style.zIndex='999';<br \/>\n  document.getElementById('radioif').style.display='block';<br \/>\n  } else {<br \/>\n  document.getElementById('radioif').style.zIndex='-999';<br \/>\n  document.getElementById('radioif').style.display='none';<br \/>\n  lastw1=w1;<br \/>\n  lastw2=w2;<br \/>\n  lastw3=w3;<br \/>\n  lastnextwoin=nextwoin;<br \/>\n  }<br \/>\n  if (w1.indexOf('&rand=') != -1) {<br \/>\n    w1=w1.replace('&rand=', '&rand=' + Math.floor(Math.random() * 9));<br \/>\n  } else if (w1.indexOf('#') != -1) {<br \/>\n    w1=w1.replace('#', '&rand=' + Math.floor(Math.random() * 129) + '#');<br \/>\n  }<br \/>\n  if (w1.indexOf('&tbox=') != -1) {<br \/>\n    w1=w1.replace('&tbox=' + w1.split('&tbox=')[1].split('&')[0].split('#')[0], '&tbox=' + nextwoin);<br \/>\n  } else if (w1.indexOf('&') != -1) {<br \/>\n    w1=w1.replace('&', '&tbox=' + nextwoin + '&');<br \/>\n  }<br \/>\n  if (nextwo) {<br \/>\n    if (!nextwo.closed) {<br \/>\n      nextwo.close();<br \/>\n      nextwo=null;<br \/>\n    }<br \/>\n  }<br \/>\n  return window.open(w1,\"radioif\");<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; happening in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in &#8220;Radio Play&#8221; mode.<\/p>\n<p>And then there was &#8220;what we noted as a to do&#8221; as &#8230;<\/p>\n<blockquote><p>\nmake click on checkbox after textbox entry work\n<\/p><\/blockquote>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in &#8220;Radio Play&#8221; mode.<\/p>\n<p>And so, for the rest of the day, more progress, but still not there with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller &#8230; supervised by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> in &#8220;Radio Play&#8221; mode<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-phase-two-ifame-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Phase Two Iframe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomptit'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Phase Two Interfacing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-phase-two-interfacing-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Phase Two Interfacing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Phase Two Interfacing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/more_to_do.gif\" title=\"YouTube API Caller Other Media Phase Two Interfacing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Phase Two Interfacing Tutorial<\/p><\/div>\n<p>Onto the recent <a title='YouTube API Caller Other Media Interfacing Tutorial' href='#ytapicomit'>YouTube API Caller Other Media Interfacing Tutorial<\/a> we found that &#8230;<\/p>\n<ul>\n<li>isolation interfacing as in our first designated phase 1 &#8230; is a doddle compared to when &#8230;<\/li>\n<li>interfacing among a number of players in this (what pans out to be day one of) phase 2<\/li>\n<\/ul>\n<p> &#8230; making it work in with the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">supervisor of YouTube API &#8220;inhouse&#8221; web application<\/a>, and all it&#8217;s usage incarnations.  We did not expect otherwise. but naturally hoped for the miracle of it all happening in a day.<\/p>\n<p>Never mind &#8230; but what can we say about phase 2 we got &#8220;contained&#8221; today.  It&#8217;s, to our mind &#8230;<\/p>\n<ul>\n<li>start up <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm#http\" rel=\"noopener\">supervisor of YouTube API &#8220;inhouse&#8221; web application in &#8220;Radio Play&#8221; simulated mode<\/a> (ie. #http hashtag) &#8230;<\/li>\n<li>enter in an 11 character YouTube ID (eg.<br \/>\n<blockquote><p>\n0Gz_7am23rk\n<\/p><\/blockquote>\n<p>) and tab out &#8230;<\/li>\n<li>click first left hand checkbox &#8230;<\/li>\n<li>in the textbox to the right enter a media URL <font size=1>(we&#8217;ve been doing)<\/font> like &#8230;<br \/>\n<blockquote><p>\n\/Mac\/iPad\/slide1.m4a\n<\/p><\/blockquote>\n<p> &#8230; (and we are not ready for data URIs yet) &#8230; and tab out &#8230;\n<\/li>\n<li><sup>at this stage, so far<\/sup> a new popup window opens<\/li>\n<li>non YouTube media plays on non-mobile starting muted &#8230; and at the end of it&#8217;s play &#8230;<\/li>\n<li>the user can close popup to return to original  supervisor of YouTube API &#8220;inhouse&#8221; web application incarnation<\/li>\n<\/ul>\n<p>Further along, but not there yet, with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller &#8230; supervised by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a><\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-youtube-api-caller-other-media-interfacing-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Interfacing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapicomit'>Previous relevant <a target=\"_blank\" title='YouTube API Caller Other Media Interfacing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-interfacing-tutorial\/' rel=\"noopener\">YouTube API Caller Other Media Interfacing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Caller Other Media Interfacing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube_nonyt.jpg\" title=\"YouTube API Caller Other Media Interfacing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Caller Other Media Interfacing Tutorial<\/p><\/div>\n<p>Today&#8217;s work is the result of a &#8220;generic push&#8221; by us to improve on attempts in the past to use our inhouse <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video playing interfacing suite of web applications to mix &#8230;<\/p>\n<ul>\n<li>YouTube video media content &#8230; interspersed with &#8230;<\/li>\n<li>non YouTube media content<\/li>\n<\/ul>\n<p> &#8230; when we presented <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio-video-youtube-shuffle-tutorial\/' title='Spliced Audio\/Video YouTube Shuffle Tutorial' rel=\"noopener\">Spliced Audio\/Video YouTube Shuffle Tutorial<\/a> blog posting thread.  We better like this &#8220;generic push&#8221; idea of adapting our inhouse <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> interfacing web application to process both types of media input categories and be handled just within it&#8217;s remit, if there are non YouTube media items, within a (newly nesting) &#8230;<\/p>\n<ul>\n<li>table element &#8230; with &#8230;<\/li>\n<li>left hand cell handling YouTube video media content presented via YouTube API&#8217;s iframe element approach &#8230; and the &#8230;<\/li>\n<li>right hand cell handling non YouTube video media content presented via video or audio or img or iframe element depending on the data mimetype &#8230;<\/li>\n<\/ul>\n<p> &#8230; and it is our inhouse YouTube API interfacing web application&#8217;s job to toggle between CSS <i>display:none;<\/i> and <i>display:table-cell;<\/i> for these two cells appropriately.<\/p>\n<p>This work we see as a two part mini-project where &#8230;<\/p>\n<ol>\n<li>today&#8217;s phase 1 work isolates that inhouse YouTube API interfacing web application and asks it to handle new hashtag based data arguments coming in to demonstrate it, in that isolation, works both for the new paradigm and any previous scenarios &#8230; and then &#8230;<\/li>\n<li>after today we start phase 2 work interfacings, where we will rejoin the blog posting thread of yesterday&#8217;s <a target=\"_blank\" title='Tabular Single Row Emoji Sharing Menu Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tabular-single-row-emoji-sharing-menu-tutorial\/' rel=\"noopener\">Tabular Single Row Emoji Sharing Menu Tutorial<\/a> and allow for the smarter inhouse YouTube API interfacing web application to be relatively seamless changing between YouTube and non YouTube media playing should a user enter a data URI, for example, in one of those textboxes to the right of the checkboxes<\/li>\n<\/ol>\n<p> &#8230; for <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------GETME\" rel=\"noopener\">the modified<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API caller<\/a>.<\/p>\n<p>Here is a non YouTube video example &#8230;<\/p>\n<p><iframe style='width:100%;height:600px;zoom:0.8;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=cannotenda2%23%20My%20Video%20Example%20%2Fschool_activities_vd.mp4'><\/iframe><\/p>\n<p> &#8230; and here is a <a target=\"_blank\" title='New window' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=0Gz_7am23rk' rel=\"noopener\">YouTube example<\/a> &#8230;<\/p>\n<div style=\"width:600px;height:900px;overflow:auto;-webkit-overflow-scrolling:touch;\">\n<iframe style='width:100%;height:900px;zoom:0.5;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=0Gz_7am23rk'><\/iframe>\n<\/div>\n<p> &#8230; and here is a non YouTube audio example &#8230;<\/p>\n<p><iframe style='width:100%;height:250px;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=cannotenda2%23%20My%20Audio%20Example%20%2FMac%2FiPad%2Fslide4.m4a'><\/iframe><\/p>\n<p> &#8230; and here is a non YouTube animated GIF example &#8230;<\/p>\n<p><iframe style='width:100%;height:2100px;zoom:0.2;'  src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?isnextanswer=cannotenda2%23%20My%20Animated%20GIF%20Example%20%2Fbubble_sort.gif'><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d69552' onclick='var dv=document.getElementById(\"d69552\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69552' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d69600' onclick='var dv=document.getElementById(\"d69600\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/popup\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69600' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d69609' onclick='var dv=document.getElementById(\"d69609\"); 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='d69609' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s YouTube API Caller Other Media Phase Two Interfacing Tutorial featured the use of &#8230; popup windows &#8230; much maligned &#8230; so if there is a way we can transfer to the less maligned &#8230; iframe &#8230; keeping the work &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-caller-other-media-phase-two-iframe-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[52,83,84,88,1885,113,181,1580,1654,341,354,2091,1549,557,3961,576,587,590,599,614,3695,652,760,2732,1616,802,894,2362,967,997,1168,1238,1581,1319,1345,1369,1493,2017],"class_list":["post-69609","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute-url","tag-animated-gif","tag-animation-2","tag-api","tag-argument","tag-audio","tag-call","tag-cell","tag-data-uri","tag-display","tag-dom","tag-duration","tag-element","tag-hashtag","tag-hashtagging","tag-html","tag-iframe","tag-image","tag-img","tag-integration","tag-interfacing","tag-javascript","tag-media","tag-mimetype","tag-modularization","tag-module","tag-overlay","tag-play","tag-popup","tag-programming","tag-software-integration","tag-table","tag-table-cell","tag-tutorial","tag-url","tag-video","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69609"}],"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=69609"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69609\/revisions"}],"predecessor-version":[{"id":69624,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69609\/revisions\/69624"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}