{"id":25351,"date":"2016-09-30T03:01:27","date_gmt":"2016-09-29T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25351"},"modified":"2016-09-30T09:04:27","modified_gmt":"2016-09-29T23:04:27","slug":"karaoke-via-youtube-api-in-iframe-microphone-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-microphone-tutorial\/","title":{"rendered":"Karaoke via YouTube API in Iframe Microphone 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 via YouTube API in Iframe Microphone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api_microphone.jpg\" title=\"Karaoke via YouTube API in Iframe Microphone Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Karaoke via YouTube API in Iframe Microphone Tutorial<\/p><\/div>\n<p>It was always a plan with the &#8220;Karaoke via YouTube API&#8221; that we would try to &#8220;splice&#8221; in user contributions for a more real &#8220;Karaoke&#8221; experience.  I&#8217;ve done work on this before, and it takes a lot of web server diskspace to be the one storing such audio files, and know why <a target=_blank title='Snapchat' href='https:\/\/www.snapchat.com\/'>Snapchat<\/a> has the length (of media) limitation.<\/p>\n<p>There was discussion in HTML5 about standards as you can read <a target=_blank title='HTML5 proposed capture property on HTML form element' href='https:\/\/www.w3.org\/TR\/html-media-capture\/'>here<\/a> and the discussion in <a target=_blank title='Capturing Audio &#038; Video in HTML5' href='http:\/\/www.html5rocks.com\/en\/tutorials\/getusermedia\/intro\/'>Capturing Audio &#038; Video in HTML5<\/a> sums it up really well as far as web applications go &#8230; you need to be able to execute, successfully, the Javascript function &#8230;<\/p>\n<p><code><br \/>\nnavigator.getUserMedia()<br \/>\n<\/code><\/p>\n<p> &#8230; to get anywhere that way.  Now we don&#8217;t expect many users to have this accessible yet, but we do not restrict methodologies to use here, and we could be getting the user to use another desktop microphone recording app perhaps, just to arrive at, in order of preference &#8230;<\/p>\n<ul>\n<li>a public URL with http: or https: transfer protocol of an audio file you&#8217;ve created &#8230; or &#8230;<\/li>\n<li>a local web server, such as Mac OS X <a target=_blank title='MAMP Mac OS X local Apache\/PHP web server landing page' href='http:\/\/www.mamp.info'>MAMP<\/a>&#8216;s http:\/\/localhost:8888\/ ones or Windows <a target=_blank title='EasyPHP local Windows WAMP Apache\/PHP\/MySql web server landing page' href='http:\/\/www.easyphp.org'>EasyPHP<\/a>&#8216;s http:\/\/localhost:8887\/ ones, URL with http: transfer protocol of an audio file you&#8217;ve created &#8230; or &#8230;<\/li>\n<li>any other http: or https: URL to slot in between YouTube slots<\/li>\n<li>a file: local audio file, perhaps saved using the great <i>navigator.getUserMedia()<\/i> <a target=_blank title='Thanks for access to this web application microphone recorder' href='https:\/\/webaudiodemos.appspot.com\/AudioRecorder\/index.html'>webpage<\/a> here<\/li>\n<\/ul>\n<p>Today&#8217;s task is to set up a system to slot these microphone audio files into the functionality.  We&#8217;ve decided to add it as a suffix possibility to the &#8220;Start in seconds&#8221; field, as much as anything, because the &#8220;;&#8221; delimitation we use means that to get back the original you just add the <b>bold<\/b> (Javascript <i>split<\/i> function) coding bit as exemplified by &#8230;<\/p>\n<p><code><br \/>\nthisd = eval(eval(document.getElementById('j' + i).value) - eval(document.getElementById('i' + i).value<b>.split(';')[0]<\/b>));<br \/>\n<\/code><\/p>\n<p> &#8230; as shown by the URL we used to create today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api_microphone.jpg\">tutorial picture<\/a>, with <b>bold<\/b> bits of user audio relevance &#8230;<\/p>\n<p><code>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=CPMpeNDIGdk<b>&amp;recown=on<\/b>&amp;youtube_duration=449.0&amp;c0=on&amp;i0=0&amp;j0=60&amp;c1=on&amp;i1=80<b>%3Bhttp%3A%2F%2Flocalhost%3A8888%2FmyRecording00.wav<\/b>&amp;j1=124&amp;c2=on&amp;i2=144&amp;j2=396&amp;c3=on&amp;i3=416&amp;j3=449&amp;i4=&amp;j4=&amp;i5=&amp;j5=&amp;i6=&amp;j6=&amp;i7=&amp;j7=&amp;i8=&amp;j8=&amp;i9=&amp;j9=<\/code><\/p>\n<p> &#8230; and so this is an easy approach to the slotting in of new ideas, but keep the same basic structure of data design otherwise &#8230; we do like to keep things that work as much as possible &#8230; doh!<\/p>\n<p>There&#8217;s more to do, but we have the framework here to move forwards, and hope it is helping you out or giving you ideas to try yourself, or &#8230;<\/p>\n<ul>\n<li>The parent HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----GETME\" title='karaoke_youtube_api.html'>karaoke_youtube_api.htm<\/a> changed 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\" title='karaoke_youtube_api.html'>this way<\/a><\/li>\n<li>The child HTML and Javascript and CSS <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> is unchanged<\/li>\n<\/ul>\n<p> &#8230; to arrive at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='Live run'>generic live run<\/a>.<\/p>\n<hr>\n<p id='kvyaiijat'>Previous relevant <a target=_blank title='Karaoke via YouTube API in Iframe jQuery Ajax Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-jquery-ajax-tutorial\/'>Karaoke via YouTube API in Iframe jQuery Ajax 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 via YouTube API in Iframe jQuery Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api_more_ja.jpg\" title=\"Karaoke via YouTube API in Iframe jQuery Ajax Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Karaoke via YouTube API in Iframe jQuery Ajax Tutorial<\/p><\/div>\n<p>We&#8217;re still improving user experience (<a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a>) aspects of our latest project &#8220;Karaoke via YouTube API&#8221; adding more functionality to yesterday&#8217;s <a title='Karaoke via YouTube API in Iframe UX Tutorial' href='#kvyaiiut'>Karaoke via YouTube API in Iframe UX Tutorial<\/a> UX ideas, as shown below.<\/p>\n<p>The work today has centred on &#8230;<\/p>\n<ul>\n<li>some CSS improvements regarding the mobile device usage &#8230; reflected by these &#8220;child&#8221; HTML and Javascript and CSS <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'>changes<\/a> (to end up like <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>)<\/li>\n<li>display h:mm:ss.ssss as you hover over a field involving <i>numerical seconds<\/i> involving the <i>onmouseover<\/i> event<\/li>\n<li>allow mmm: keyboard entries be mapped to sssss (equals mmm x 60) <i>numerical seconds<\/i> immediately upon entry, involving &#8230;\n<ol>\n<li><i>onblur<\/i> event checking for HTML input type=text <i>numerical second<\/i> fields &#8230; and &#8230;<\/li>\n<li><i>onkeyup<\/i>, <i>oninput<\/i>, <i>onclick<\/i> events contribute to the checking of HTML input type=number <i>numerical second<\/i> fields<\/li>\n<\/ol>\n<p> &#8230; and reflected by these &#8220;parent&#8221; HTML and Javascript and CSS <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\" title='karaoke_youtube_api.html'>code changes<\/a><\/li>\n<li>a new mode of YouTube video id searches via the user entry of &#8220;Search Words&#8221; using <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> techniques to search YouTube for videos of interest to the user Search Words entered, featuring all the events of the two steps above, and that we first talked about with <a target=_blank title='Ajax jQuery Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-jquery-primer-tutorial\/'>Ajax jQuery Primer Tutorial<\/a> &#8230; and reflected by these &#8220;parent&#8221; HTML and Javascript and CSS <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\" title='karaoke_youtube_api.html'>code changes<\/a> (to end up like <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html---GETME\" title='karaoke_youtube_api.html'>karaoke_youtube_api.htm<\/a>)<\/li>\n<\/ul>\n<p>So, encapsulated, what did we learn from today&#8217;s work?<\/p>\n<ul>\n<li>the use of the HTML input type=number field type looks tempting for numerical data, but is so much harder to tailor later than an HTML input type=text field, when it comes down to data validation issues<\/li>\n<li>jQuery Ajax is a great way for mobile devices to &#8220;join the party&#8221; of Ajax functionality, away from those denials of usage of <i>onmouseover<\/i> (ie. hover) logic, that mobile devices do not usually detect, but is a very popular place to intervene for Ajax functionality on non-mobile devices<\/li>\n<li>jQuery Ajax still needed inhouse PHP to be used for today&#8217;s changes as per the use of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.php_GETME\" title='legend_via_map.php'>legend_via_map.php<\/a> from the tutorial <a target=_blank title='Legend for and from HTML Map Element Web Server Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/legend-for-and-from-html-map-element-web-server-tutorial\/'>Legend for and from HTML Map Element Web Server Tutorial<\/a> due to cross-domain usage restrictions, and you can read more about all this in the thread of blog postings from that last link<\/li>\n<\/ul>\n<p>Let&#8217;s revisit that &#8220;sweet green icing&#8221; example with the new software changes &#8230;<\/p>\n<p><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\" document.getElementById('iimacarthurpark').style.display='block'; document.getElementById('iimacarthurpark').src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=CPMpeNDIGdk&#038;youtube_duration=449.0&#038;c0=on&#038;i0=0&#038;j0=60&#038;c1=on&#038;i1=80&#038;j1=124&#038;c2=on&#038;i2=144&#038;j2=396&#038;c3=on&#038;i3=416&#038;j3=449&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9='; \">Macarthur Park Karaoke<\/a> is shown below &#8230;<\/p>\n<p>\n<iframe id='iimacarthurpark' title='Macarthur Park karaoke' style='height:900px; width:100%;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm'><\/iframe><\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\">generic live run<\/a> also has that new look as well.  Hope this is helping you out in some way.<\/p>\n<hr>\n<p id='kvyaiiut'>Previous relevant <a target=_blank title='Karaoke via YouTube API in Iframe UX Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-ux-tutorial\/'>Karaoke via YouTube API in Iframe UX 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.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Karaoke via YouTube API in Iframe UX Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api_more.jpg\" title=\"Karaoke via YouTube API in Iframe UX Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Karaoke via YouTube API in Iframe UX Tutorial<\/p><\/div>\n<p>We&#8217;re primarily working on improving some user experience (<a target=_blank title='UX information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a>) aspects to yesterday&#8217;s beginnings with our latest project &#8220;Karaoke via YouTube API&#8221; that we started with <a title='Karaoke via YouTube API in Iframe Primer Tutorial' href='#kvyaiipt'>Karaoke via YouTube API in Iframe Primer Tutorial<\/a> as shown below.<\/p>\n<p>We feel that, in a similar way to the difficulty getting co-ordinates for an HTML map element, it will be difficult to get users to just use the keyboard to enter in <i>time elapsed<\/i> values for the Karaoke presentation of a YouTube (presumably music) video.  But what if they could have a first run clicking the YouTube video, which causes a pause, to establish stop and start points for the Karaoke?  That sounds fine, but we found that a simple <i>onclick<\/i> event formulated with the encapsulating HTML div element was not the go, and we didn&#8217;t really expect it would, but you should always try the obvious before diving too far into the ins and outs of an I.T. issue.<\/p>\n<p>So we read at this <a target=_blank title='Very useful link' href='http:\/\/stackoverflow.com\/questions\/29640675\/possible-to-add-an-onclick-event-to-a-youtube-iframe'>very useful link<\/a>, thanks, and we&#8217;d already effectively been trapping this event, it is at the <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>API<\/a> <i>onStateChanged<\/i> that will be the equivalent for us, to the <i>onclick<\/i> event, and in this <i>onStateChanged<\/i> event we&#8217;d already written code regarding three matters we are interested in once within this YouTube API <i>event<\/i>&#8216;s code &#8230;<\/p>\n<ul>\n<li>are we paused?<\/li>\n<li>are we playing? &#8230; believe you can&#8217;t do both, but just bear with our dumbness &#8230; at least we&#8217;re thorough, which is better than slack, believe me<\/li>\n<li>are we &#8220;done&#8221; playing the video parts we wanted to play?<\/li>\n<\/ul>\n<p> &#8230; and so we constructed the crux of our new &#8220;onStateChanged&#8221; sublogic in the Javascript function &#8230;<\/p>\n<p><code><br \/>\nfunction analyzemaybe(playing, paused, isdone) {<br \/>\n        if (document.URL.indexOf('start=') != -1 &amp;&amp; document.URL.indexOf('playtime=') != -1) {<br \/>\n        if (document.URL.indexOf('start=0') == -1 || document.URL.indexOf('playtime=0') == -1) {<br \/>\n        if (paused != 0) {<br \/>\n          var urp=parent.document.getElementById('updatethisplease');<br \/>\n          if (urp) {<br \/>\n          if (urp.value != '') {<br \/>\n          var urpvalue=urp.value;<br \/>\n          parent.document.getElementById(urpvalue).value=player.getCurrentTime();<br \/>\n          if (urpvalue.indexOf('i') == 0) {<br \/>\n           urpvalue=urpvalue.replace('i','j');<br \/>\n           parent.document.getElementById('updatethisplease').value=urpvalue;<br \/>\n          } else {<br \/>\n           urpvalue=urpvalue.replace('j','');<br \/>\n           urpvalue=eval(1 + eval(urpvalue));<br \/>\n           urpvalue='i' + urpvalue;<br \/>\n           if (parent.document.getElementById(urpvalue).value == \"\") {<br \/>\n             parent.document.getElementById(urpvalue.replace('i','c')).checked=true;<br \/>\n           }<br \/>\n           parent.document.getElementById('updatethisplease').value=urpvalue;<br \/>\n          }<br \/>\n          }<br \/>\n          }<br \/>\n        }<br \/>\n\t\t}<br \/>\n\t\t}<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; called, in amongst the <b>Karaoke<\/b> code of the logic for the &#8220;onStateChanged&#8221; event as per &#8230;<\/p>\n<p><code><br \/>\n      \/\/ 5. The API calls this function when the player's state changes.<br \/>\n      \/\/    The function indicates that when playing a video (state=1),<br \/>\n      \/\/    the player should play for six seconds and then stop.<br \/>\n      var done = false;<br \/>\n      function onPlayerStateChange(event) {<br \/>\n        one=0;<br \/>\n        onepause=0;<br \/>\n        if (event.data == YT.PlayerState.PLAYING) one=1;<br \/>\n        if (event.data == YT.PlayerState.PAUSED) onepause=1;<br \/>\n        <b>analyzemaybe(one, onepause, done);<\/b><br \/>\n        if (event.data == YT.PlayerState.PLAYING && !done) {<br \/>\n          duration=player.getDuration();<br \/>\n          <b>if (document.URL.indexOf('start=0') != -1 && document.URL.indexOf('playtime=0') != -1) {<br \/>\n          oursecscnt=-1;<br \/>\n          setTimeout(stopVideo, 10);<br \/>\n          parent.document.getElementById('youtube_duration').value='' + duration;<br \/>\n          parent.document.getElementById('myh1').innerHTML=player.getVideoData().title;<br \/>\n          if (kpi == -9) {<br \/>\n        if (document.URL.indexOf('start=') != -1 && document.URL.indexOf('playtime=') != -1) {<br \/>\n        if (document.URL.indexOf('start=0') == -1 || document.URL.indexOf('playtime=0') == -1) {<br \/>\n            kpi=-8;<br \/>\n            kpi=player.getCurrentTime();<br \/>\n            keepParentInformed();<br \/>\n            }<br \/>\n            }<br \/>\n          }<\/b><br \/>\n          return;<br \/>\n          } else {<br \/>\n          if (playtime &lt; 0) playtime=duration * 1000;<br \/>\n          document.title='Playing YouTube ' + vid + of + ' for ' + playtime \/ 1000 + ' seconds ... is ' + duration + ' seconds altogether.';<br \/>\n          document.getElementById('ptitle').innerHTML='Playing YouTube ' + vid + of + ' for ' + playtime \/ 1000 + ' seconds ... is ' + duration + ' seconds altogether.' + etc_volume();<br \/>\n          document.getElementById('ivol').value=player.getVolume();<br \/>\n          document.getElementById('ipbr').value=player.getPlaybackRate();<br \/>\n          document.getElementById('iqty').value=player.getPlaybackQuality();<br \/>\n          setTimeout(stopVideo, playtime + delay);<br \/>\n          done = true;<br \/>\n          eventtarget=event.target;<br \/>\n          if (eval(oursecscnt) &gt; 0) {<br \/>\n            document.getElementById('ptitle').innerHTML='Playing YouTube ' + vid + ' starting at ' + oursecscnt + ' seconds ' + of + ' for ' + playtime \/ 1000 + ' seconds ... is ' + duration + ' seconds altogether.' + etc_volume();<br \/>\n            document.title='Playing YouTube ' + vid + ' starting at ' + oursecscnt + ' seconds ' + of + ' for ' + playtime \/ 1000 + ' seconds ... is ' + duration + ' seconds altogether.';<br \/>\n          <b>if (kpi == -9) {<br \/>\n        if (document.URL.indexOf('start=') != -1 && document.URL.indexOf('playtime=') != -1) {<br \/>\n        if (document.URL.indexOf('start=0') == -1 || document.URL.indexOf('playtime=0') == -1) {<br \/>\n            kpi=-8;<br \/>\n            kpi=player.getCurrentTime();<br \/>\n            \/\/alert(kpi);<br \/>\n            keepParentInformed();<br \/>\n            }<br \/>\n            }<br \/>\n          }<br \/>\n            eventtarget.loadVideoById(vid, eval(oursecscnt), eval(oursecscnt + playtime \/ 1000), \"medium\");<br \/>\n            oursecscnt=-1;<\/b><br \/>\n          }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n<\/code><\/p>\n<p> &#8230; that sits in the supervised HTML\/Javascript you could call <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> changed today in <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'>this way<\/a> quite considerably.  &#8220;Quite considerably&#8221; because we need to set up another means by which parent and child can communicate, and we introduce a new HTML element as per &#8230;<\/p>\n<p><code><br \/>\n&lt;input id='updatethisplease' type='hidden' value=''&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; sitting in the parent, HTML\/Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-GETME\" title='karaoke_youtube_api.html'>karaoke_youtube_api.html<\/a> changed today 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\" title='karaoke_youtube_api.html'>this way<\/a> (and with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html\" title='Click picture'>generic live run<\/a>), that remains blank in value if there is no requirement from the user to opt fr &#8220;onStateChanged&#8221; methods of entering in &#8220;time elapsed&#8221; values &#8230; and that is decided by the fleeting existance of these two HTML input type=button elements as per &#8230;<\/p>\n<p><code><br \/>\n&lt;input id='mousej' type='button' style='background-color:#f0f0f0; display:inline; visibility: hidden;' onclick=' mousebelowj(this);' value='Fill Table Below via Mouse Video Pauses Starting with '&gt;&lt;\/input&gt;&lt;input id='mousei' type='button' style='background-color:#f5f5f5; display:inline; visibility: hidden;' onclick=' mousebelowi(this);' value='Fill Table Starting with 0 cell'&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; that don&#8217;t show up unless the following happens &#8230;<\/p>\n<ol>\n<li>the URL has no GET parameters<\/li>\n<li>you&#8217;ve just tripped the &#8220;onblur&#8221; event for the HTML input type=text element that collects the YouTube video id from the user<\/li>\n<li>the user has not clicked any HTML input type=checkbox elements yet<\/li>\n<\/ol>\n<p> &#8230; and so if one of those HTML input type=button elements above is clicked, the user is going to determine &#8220;time elapsed&#8221; values by clicking the embedded YouTube video, that is now played.  The means for communicating between the parent and child is via filling in the HTML input type=hidden <i>updatethisplease<\/i> element with the Javascript DOM id of the parent field next in line, in the table, to be filled out.  One the user finished that phase of proceedings, everything else about the web application functions as per yesterday.  Except &#8230; <font size=1>and isn&#8217;t there always an &#8220;except&#8221;<\/font> &#8230; since yesterday we&#8217;ve tightened up something we almost got to yesterday, but not quite &#8230; in the course of playing the YouTube video to do this &#8220;Karaoke&#8221; <i>thang<\/i>, what if the user &#8220;dawdles&#8221; about it or jumps forward?  Well, we have with the parent HTML a new HTML input type=hidden element as per &#8230;<\/p>\n<p><code><br \/>\n&lt;input id='conduit' type='hidden' value=''&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as a second go between, and as a place the child can tell the parent about real &#8220;time elapsed&#8221; scenarios for playing (or paused) videos to facilitate the parent changing their &#8220;pretty dumb&#8221; Javascript <i>setTimeout<\/i> calls whose delays, without help from the child, are just based on perfectly smoothly running YouTube videos with no user delays nor response time delays.  So that is done with the YouTube API call like &#8230;<\/p>\n<p><code><br \/>\nvar xkpi=player.getCurrentTime();<br \/>\n<\/code><\/p>\n<p> &#8230; called as the YouTube video is being played (or not).<\/p>\n<p>So what&#8217;s that other bit of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api_more.jpg\" title='Titorial picture'>tutorial picture<\/a> showing?  Well, for now, we think a good collaboration tool web browsers already have, and want to point out to you today, is that they all have within their File menu an option to Share a URL via Email.  Once you reach the point of seeing our red button in our web application, and you want to share your experience, then you are in a position to bring down that File menu on your web browser and Share Email away.  We may particularize this within the web application, further, but wanted to point out this web browser feature now, as well.<\/p>\n<hr>\n<p id='kvyaiipt'>Previous relevant <a target=_blank title='Karaoke via YouTube API in Iframe Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-primer-tutorial\/'>Karaoke via YouTube API in Iframe 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\/karaoke_youtube_api.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Karaoke via YouTube API in Iframe Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.jpg\" title=\"Karaoke via YouTube API in Iframe Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Karaoke via YouTube API in Iframe Primer Tutorial<\/p><\/div>\n<p>We have a burgeoning <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Karaoke' title='Karaoke information from Wikipedia ... thanks'>Karaoke<\/a> web application idea for you today, as with WordPress 4.1.1&#8217;s <a target=_blank title='Karaoke via YouTube API in Iframe Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-primer-tutorial\/'>Karaoke via YouTube API in Iframe Primer Tutorial<\/a>, that builds on what we last left off with at <a title='YouTube API Iframe Synchronicity Resizing Tutorial' href='#yaisrt'>YouTube API Iframe Synchronicity Resizing Tutorial<\/a> as shown below.<\/p>\n<p>We use the HTML code off that tutorial and tweak it a bit to be able to play a <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> video at a designated place via the great YouTube <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>.<\/p>\n<p>This ability means a user can plan ahead for bits where the YouTube clip is played as is, and bits of silence where the user or users can sing along to bits that are very well known.<\/p>\n<p>Today&#8217;s featured execution of the resultant HTML and Javascript (grand)parent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html_GETME\" title='karaoke_youtube_api.html'>karaoke_youtube_api.html<\/a> web application has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html\" title='karaoke_youtube_api.html'>generic live run<\/a> but as a special treat for any &#8220;sweet green icing&#8221; fans &#8230; know I am &#8230; the link below waits 3 times for you <a target=_blank href='http:\/\/genius.com\/Richard-harris-macarthur-park-lyrics' title='Thanks for Macarthur Park lyrics'>to sing<\/a> &#8230;<\/p>\n<blockquote cite='http:\/\/genius.com\/Richard-harris-macarthur-park-lyrics'><p>\nSomeone left the cake out in the rain<br \/>\nI don&#8217;t think that I can take it<br \/>\nCause it took so long to bake it<br \/>\nAnd I&#8217;ll never have that recipe again<br \/>\nOh, nooo!\n<\/p><\/blockquote>\n<p><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\" document.getElementById('imacarthurpark').style.display='block'; document.getElementById('imacarthurpark').src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html?youtubeid=CPMpeNDIGdk&#038;youtube_duration=449.0&#038;c0=on&#038;i0=0&#038;j0=60&#038;c1=on&#038;i1=80&#038;j1=124&#038;c2=on&#038;i2=144&#038;j2=396&#038;c3=on&#038;i3=416&#038;j3=449&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9='; \">Macarthur Park Karaoke<\/a> is shown below &#8230;<\/p>\n<p>\n<iframe id='imacarthurpark' title='Macarthur Park karaoke' style='height:740px; width:100%;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html'><\/iframe><\/p>\n<p>We want to thank this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/22726941\/youtube-api-get-current-video-title'>useful link<\/a> for their great help with extracting the YouTube video title, necessary today, to give the user context about what they &#8220;might&#8221; be singing along to &#8230; depending on their talent of course?!<\/p>\n<p>So what once was, and still is, a parent (HTML\/Javascript you could call <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> changes today in <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'>this way<\/a> and still has its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a>) becomes the child to the new Karaoke (grand)parent above.<\/p>\n<p>Today&#8217;s web application has a CSS &#8220;subtheme&#8221; today that exemplifies the usefulness of the CSS style properties &#8230;<\/p>\n<p><code><br \/>\ndisplay:inline; visibility: hidden;<br \/>\n<\/code><\/p>\n<p> &#8230; rather than just &#8230;<\/p>\n<p><code><br \/>\ndisplay:none;<br \/>\n<\/code><\/p>\n<p> &#8230; when it comes to reshowing HTML elements that are preferably &#8220;inline&#8221; by nature &#8230; ie. you&#8217;re trying to keep them on the same horizontal line of elements.  This first method sort of ensures that CSS &#8220;space&#8221; is left aside, even when the elements are invisible, so that when you &#8220;Javascript DOM&#8221; them to be visible again via statements like &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById('dkaraoke').style.visibility='visible';<br \/>\n<\/code><\/p>\n<p> &#8230; this results in a much better &#8220;inline&#8221; result than does &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById('dkaraoke').style.display='inline';  \/\/ or 'block' or any other idea<br \/>\n<\/code><\/p>\n<p>We&#8217;ll be refining this Karaoke web application as time goes on, and hope you flex your singing voice trying it out yourself.<\/p>\n<hr>\n<p id='yaisrt'>Previous relevant <a target=_blank title='YouTube API Iframe Synchronicity Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-resizing-tutorial\/'>YouTube API Iframe Synchronicity Resizing 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\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"YouTube API Iframe Synchronicity Resizing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_dynamically_resize.jpg\" title=\"YouTube API Iframe Synchronicity Resizing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Iframe Synchronicity Resizing Tutorial<\/p><\/div>\n<p>Today&#8217;s work concerns dynamic resize of HTML iframe child elements that could resize themselves because their parent HTML elements have changed size via user intervention.<\/p>\n<p>We want to show you this today to talk a bit about the CSS properties of &#8230;<\/p>\n<ul>\n<li>width<\/li>\n<li>height<\/li>\n<\/ul>\n<p> &#8230; and about the usefulness of &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle()<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to calculate the width or height, in pixels, of an HTML element, in our case that either &#8230;<\/p>\n<ul>\n<li>has no width nor height defined<\/li>\n<li>has a width and\/or height defined as a percentage<\/li>\n<\/ul>\n<p>So, think you will agree, that if you were following our current thread of tutorials yesterday, you&#8217;d have agreed, especially if you viewed it on a laptop, that the web application involving the &#8220;grid of television&#8221; HTML iframe elements could benefit from a bit more room given over to the HTML table housing the &#8220;grid of television&#8221; HTML iframe elements.  That is a pretty simple CSS change as per the <b>bold<\/b> bit below &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ntd { margin: 0 0 0 0; background-color: white;  }<br \/>\ndiv { margin: 0 0 0 0; }<br \/>\niframe { margin-left: 0px; }<br \/>\n<b>table { width: 100%; height: 90%; }<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then to change from this static arrangement to a user interventional additional control to width and height management how about the PHP <b>bold<\/b> bits below &#8230;<\/p>\n<p><code><br \/>\n<b>&lt;?php<br \/>\n  if (strpos($p1, \".\") !== false) {<br \/>\n     echo \"\\n <\/b>window.open('http:\/\/www.youtube.com\/watch?v=K5StTXQofqs', '_blank', 'top=50,left=50,width=500,height=500');<b> \\n\";<br \/>\n  } else {<br \/>\n     echo \"\\n document.getElementById('myh1').innerHTML=\\\"Enjoy the Videos ... &lt;span id=sw&gt;&lt;a style=color:red; onclick=rew(-1);&gt;-&lt;\/a&gt;Width (100%)&lt;a style=color:green; onclick=rew(1);&gt;+&lt;\/a&gt;&lt;\/span&gt; &lt;span id=sh&gt;&lt;a style=color:red; onclick=reh(-1);&gt;-&lt;\/a&gt;Height (90%)&lt;a style=color:green; onclick=reh(1);&gt;+&lt;\/a&gt;&lt;\/span&gt; ... Thanks &lt;a target=_blank title='YouTube' href='http:\/\/www.youtube.com'&gt;YouTube&lt;\/a&gt;\\\"; \\n\";<br \/>\n  }<br \/>\n?&gt;<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; and so this has the user in the &#8220;know&#8221; but what about the child &#8220;grid of television&#8221; HTML iframe elements being brought into the loop.  This can be achieved in the external Javascript involving, for the most part, a <b>new function<\/b> that runs constantly looking out for user interventional changes to the width and height of the parent&#8217;s HTML table element via &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction checkdim() {   \/\/ dynamic resizer of HTML iframe elements via examination of parent div elements<br \/>\n  var jv=1, dw=\"100%\", dh=\"100%\", ielem, wassrc='', wass;<br \/>\n  var elem1=document.getElementById('ptable');<br \/>\n  dh=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"height\").replace('px','').replace('%',''));<br \/>\n  dw=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"width\").replace('px','').replace('%',''));<br \/>\n  if (Math.abs(eval(dw) - eval(ptablew) + eval(dh) - eval(ptableh)) &gt; 0.9) {  \/\/ change to parent div elements detected<br \/>\n   ptablew=dw;<br \/>\n   ptableh=dh;<br \/>\n   wass=document.getElementById('myh1').innerHTML.split('~');<br \/>\n   document.getElementById('myh1').innerHTML=eval(dw) + ',' + eval(ptablew) + ',' + eval(dh) + ',' + eval(ptableh) + ' ~' + wass[1];<br \/>\n   \/\/alert(Math.abs(eval(dw) - eval(ptablew) + eval(dh) - eval(ptableh)));<br \/>\n   for (jv=1; jv&lt;=9; jv++) {<br \/>\n    elem1=document.getElementById(elarr[eval(-1 + jv)]);<br \/>\n    ielem=document.getElementById('if' + jv);<br \/>\n    wassrc=ielem.src;<br \/>\n    wass=wassrc.split('&this=');<br \/>\n    if (wass.length &gt; 1) {<br \/>\n      dh=eval(ptableh \/ 3); \/\/=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"height\").replace('px',''));<br \/>\n      dw=eval(ptablew \/ 3); \/\/=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"width\").replace('px',''));<br \/>\n      warr[eval(-1 + jv)]=eval(dw);<br \/>\n      harr[eval(-1 + jv)]=eval(dh);<br \/>\n      \/\/if (jv == 1) alert(\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?width=\" + dw + \"&height=\" + dh + \"&this=\" + wass[1]);<br \/>\n      ielem.src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?width=\" + dw + \"&height=\" + dh + \"&this=\" + wass[1];<br \/>\n    }<br \/>\n   }<br \/>\n  } else {<br \/>\n   wass=document.getElementById('myh1').innerHTML.split('~');<br \/>\n   document.getElementById('myh1').innerHTML=eval(dw) + ',' + eval(ptablew) + ',' + eval(dh) + ',' + eval(ptableh) + ' ~' + wass[1];<br \/>\n  }<br \/>\n  setTimeout(checkdim,5000);<br \/>\n}<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; which gets us to changed programming source code &#8230;<\/p>\n<ul>\n<li>Supervisor HTML\/Javascript you could call <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> doesn&#8217;t change today and still has its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link &#8230; of &#8230;<\/li>\n<li>Called PHP you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php-GETME\" title=\"reveal_div.php\">reveal_div.php<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php-GETME\">this way<\/a> &#8230; as well as &#8230;<\/li>\n<li>Called HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.html-GETME\" title=\"reveal_div.html\">reveal_div.html<\/a> is unchanged &#8230; but &#8230;<\/li>\n<li>Called External Javascript you could call <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js---GETME'>longhover_sup.js<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js---GETME\">this way<\/a> to allow for user resizable YouTube video media usage in that &#8220;grid of televisions&#8221; mode of usage, via the <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a>.<\/li>\n<\/ul>\n<p>Again, we&#8217;ll leave you with a <a target=_blank title='Live run of tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php?p1=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4100%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p2=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4200%26from%3DkMGJ0VyUmvI%26to%3DkMGJ0VyUmvI&#038;p3=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4300%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p4=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4400%26from%3DEi_VUl8qdRU%26to%3DEi_VUl8qdRU&#038;p5=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4500%26from%3DY-FMqbwN_9g%26to%3DY-FMqbwN_9g&#038;p6=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4600%26from%3D6SBVw047-Mw%26to%3D6SBVw047-Mw&#038;p7=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4700%26from%3DLLtVd0c0tGXuTSbU5d8cSBUg%26to%3DLLtVd0c0tGXuTSbU5d8cSBUg&#038;p8=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4800%26from%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE%26to%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE&#038;p9=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4900%26from%3DuzmtNSKf_JQ%26to%3DuzmtNSKf_JQ\n'>live run<\/a> that helped piece together today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_dynamically_resize.jpg\">tutorial picture<\/a>, an improvement on &#8220;room to move&#8221; compared to yesterday, we hope you agree?<\/p>\n<hr>\n<p id='yaist'>Previous relevant <a target=_blank title='YouTube API Iframe Synchronicity Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-tutorial\/'>YouTube API Iframe Synchronicity 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\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"YouTube API Iframe Synchronicity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_synchronize.jpg\" title=\"YouTube API Iframe Synchronicity Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Iframe Synchronicity Tutorial<\/p><\/div>\n<p>Do you ever go into an electronics or electrical appliance store into the television section, and see all those television sets playing not always the same channel at once?   Mesmerising, huh?<\/p>\n<p>Have seen this also, in Real Estate windows.   Well, today, we allow up to 9 YouTube videos and\/or playlists to be played at once, just to give you a chance to &#8220;blow your mind&#8221;, especially for those expert multi-taskers amongst us.<\/p>\n<p>What we called on to facilitate this functionality today, building on the existing work up to <a title='YouTube API Video Playlist Tutorial' href='#yavpt'>YouTube API Video Playlist Tutorial<\/a>, as shown below, is &#8230;<\/p>\n<ol>\n<li>Our recent <a title='YouTube API Video Playlist Tutorial' href='#yavpt'>YouTube API Video Playlist Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>Our not so recent <a target=_blank title='External Javascript Genericity Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-follow-up-tutorial\/'>External Javascript Genericity Follow Up Tutorial<\/a><\/li>\n<\/ol>\n<p>So this HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8220;grid of television&#8221; functionality, to us, puts it in a &#8220;synchronization&#8221; category of tutorial, and because of the homogeneity of the media presentation &#8230; ie. we use YouTube videos and the YouTube API with 1 above &#8230; we think our synchronicities could work quite well, with less hit and miss, compared to previous <a target=_blank title='Synchronize tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize'>efforts<\/a> we&#8217;ve put in at this blog with non-homogeneous media types and presentations.  It has to be said, also, that that is the strength of using APIs to help with your software, as they tend to unify concepts, perhaps restricting what is allowed, to focus on a known set of inputs and outputs &#8230; EOR &#8230; end of rave.<\/p>\n<p>We feel a behove coming on &#8230; atchoobehove &#8230; that&#8217;s better &#8230; and so it behoves us to show you programming source code &#8230;<\/p>\n<ul>\n<li>Supervisor HTML\/Javascript you could call <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>, changed in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link &#8230; of &#8230;<\/li>\n<li>Called PHP you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php_GETME\" title=\"reveal_div.php\">reveal_div.php<\/a> is unchanged &#8230; as well as &#8230;<\/li>\n<li>Called HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.html-GETME\" title=\"reveal_div.html\">reveal_div.html<\/a> is unchanged &#8230; but &#8230;<\/li>\n<li>Called External Javascript you could call <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js--GETME'>longhover_sup.js<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js--GETME\">this way<\/a> to allow for YouTube video media usage via the <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a>.<\/li>\n<\/ul>\n<p>We&#8217;ll leave you with a <a target=_blank title='Live run of tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php?p1=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4100%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p2=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4200%26from%3DkMGJ0VyUmvI%26to%3DkMGJ0VyUmvI&#038;p3=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4300%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p4=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4400%26from%3DEi_VUl8qdRU%26to%3DEi_VUl8qdRU&#038;p5=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4500%26from%3DY-FMqbwN_9g%26to%3DY-FMqbwN_9g&#038;p6=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4600%26from%3D6SBVw047-Mw%26to%3D6SBVw047-Mw&#038;p7=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4700%26from%3DLLtVd0c0tGXuTSbU5d8cSBUg%26to%3DLLtVd0c0tGXuTSbU5d8cSBUg&#038;p8=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4800%26from%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE%26to%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE&#038;p9=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4900%26from%3DuzmtNSKf_JQ%26to%3DuzmtNSKf_JQ\n'>live run<\/a> that helped piece together today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_synchronize.jpg\">tutorial picture<\/a>.<\/p>\n<hr>\n<p id='yavpt'>Previous relevant <a target=_blank title='YouTube API Video Playlist Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-video-playlist-tutorial\/'>YouTube API Video Playlist 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\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Video Playlist Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_api_playlist.jpg\" title=\"YouTube API Video Playlist Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Video Playlist Tutorial<\/p><\/div>\n<p><a target=_blank title='Playlist information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Playlist'>Playlists<\/a> are the topic we hone in on today with the continuation of our <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a> &#8220;knowledge quest&#8221; today, as with WordPress 4.1.1&#8217;s <a target=_blank title='YouTube API Video Playlist Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-video-playlist-tutorial\/'>YouTube API Video Playlist Tutorial<\/a>, building on yesterday&#8217;s <a title='YouTube API Start and Stop Resizing Tutorial' href='#yasascrt'>YouTube API Start and Stop Resizing Tutorial<\/a> as shown below.<\/p>\n<p>Perhaps your first exposure to a &#8220;playlist&#8221; was with the <a target=_blank title='iTunes information from Apple' href='http:\/\/www.apple.com\/au\/itunes\/'>iTunes<\/a> playlists, as receptacles for your favourite music in the form of a song list?  But &#8220;playlist&#8221; has morphed into so much more than with those early &#8220;heady&#8221; days of the <a target=_blank title='iPod information from Apple' href='http:\/\/www.apple.com\/au\/ipod\/'>iPod<\/a> we talked about with the <a target=_blank title='Kinesthetic iPod Learning Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/kinesthetic-ipod-learning-primer-tutorial\/'>Kinesthetic iPod Learning Primer Tutorial<\/a>, and we think of it today in terms of YouTube playlists of videos.  Think playlist, <a target=_blank title='Think Think Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/think-think-game-primer-tutorial\/'>think<\/a> media.<\/p>\n<p>The fact is, to us, looking at YouTube, there are two main sources for the concept of &#8220;receptacle&#8221; or &#8220;container&#8221; or &#8220;collection&#8221; of videos, that being &#8230;<\/p>\n<ol>\n<li>a <a target=_blank title='YouTube playlist' href='https:\/\/support.google.com\/youtube\/answer\/57792?hl=en'>playlist<\/a> &#8230; which can be created by anyone, as used by me to create the <a target=_blank title='Nala and Luna playlist' href='https:\/\/www.youtube.com\/watch?v=Ei_VUl8qdRU&#038;list=PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE'>Nala and Luna<\/a> &#8220;playlist&#8221;<\/li>\n<li>a <a target=_blank title='YouTube channel information' href='https:\/\/support.google.com\/youtube\/answer\/1646861?hl=en'>channel<\/a> &#8230; which is a concept you use to upload content to YouTube, and you register with YouTube to create &#8230; here is an <a target=_blank title='YouTube channel for RJM Programming' href='http:\/\/www.youtube.com\/rmetcalfeify'>RJM Programming one (channel)<\/a><\/li>\n<\/ol>\n<p>As you might expect from the explanation above, you need to sign up for a Google YouTube API <a target=_blank title='YouTube API Developer Key' href='https:\/\/developers.google.com\/youtube\/v3\/getting-started#intro'>Developer Key<\/a> to glean information about a YouTube &#8220;channel&#8221; of interest, but &#8220;playlists&#8221; are that little bit more public, and you can point at a YouTube &#8220;playlist&#8221; of interest via a URL like &#8230;<\/p>\n<p><code><br \/>\n&lt;a target=_blank title='Google Developers playlist' href='https:\/\/www.youtube.com\/watch?v=URuOw1Pi58Y&list=LLtVd0c0tGXuTSbU5d8cSBUg'&gt;<a target=_blank title='Google Developers playlist' href='https:\/\/www.youtube.com\/watch?v=URuOw1Pi58Y&#038;list=LLtVd0c0tGXuTSbU5d8cSBUg'>https:\/\/www.youtube.com\/watch?v=URuOw1Pi58Y&list=LLtVd0c0tGXuTSbU5d8cSBUg<\/a>&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and so, with that in mind, we don&#8217;t try to reinvent wheels here with our new functionality of &#8220;playlist&#8221; inclusion today, but simply access one of those URLs like above via an API call like &#8230;<\/p>\n<p><code><br \/>\nvar yturlis=player.<a target=_blank title='YouTube API Retriving video information' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Retrieving_video_information'>getVideoUrl<\/a>();<br \/>\n<\/code><\/p>\n<p> &#8230; and let the brilliance of the YouTube API add all this great &#8220;linked (video) list&#8221; functionality (you can see working in today&#8217;s <a target=_blank title='Click picture' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_api_playlist.jpg\">tutorial picture<\/a>) to our (still only) HTML and Javascript web application you could call <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>, changed from yesterday in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link for you to try this &#8220;playlist&#8221; functionality out for yourself.<\/p>\n<hr>\n<p id='yasascrt'>Previous relevant <a target=_blank title='YouTube API Start and Stop Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-start-and-stop-resizing-tutorial\/'>YouTube API Start and Stop Resizing 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.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Video Resizing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_api_more.jpg\" title=\"YouTube API Video Resizing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Video Resizing Tutorial<\/p><\/div>\n<p>We continue with our <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a> today building on yesterday&#8217;s <a title='YouTube API Start and Stop Synchronizing Tutorial' href='#yasascst'>YouTube API Start and Stop Synchronizing Tutorial<\/a> as shown below.<\/p>\n<p>The matters we&#8217;d like to direct your attention to today are &#8230;<\/p>\n<ul>\n<li>width and height of YouTube embedded Iframe player<\/li>\n<li>audio volume<\/li>\n<li>video playback rate<\/li>\n<li>video playback quality<\/li>\n<\/ul>\n<p> &#8230; respectively involving API reference to &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Loading_a_Video_Player'>width and height of YouTube embedded Iframe player<\/a> are parameters for the &#8220;Player&#8221; constructor, and we don&#8217;t use it, but you can <a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_controls'>dynamically change width and height<\/a> via methods are discussed under &#8220;Setting the player size&#8221;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_controls'>audio volume<\/a> methods are discussed under &#8220;Changing the player volume&#8221;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_controls'>video playback rate<\/a> methods are discussed under &#8220;Setting the playback rate&#8221;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_quality'>video playback quality<\/a> methods are discussed under &#8220;Playback quality&#8221;<\/li>\n<\/ul>\n<p>Here&#8217;s the updated HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--GETME\" title='stop_start_youtube.html'>stop_start_youtube.htm<\/a>, changed from yesterday in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.htm\" title='Click picture'>live run<\/a> link for you to try these new ideas yourself.<\/p>\n<hr>\n<p id='yasascst'>Previous relevant <a target=_blank title='YouTube API Start and Stop Synchronizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-start-and-stop-synchronizing-tutorial\/'>YouTube API Start and Stop Synchronizing 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.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Video Synchronizing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_synchronizing.jpg\" title=\"YouTube API Video Synchronizing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Video Synchronizing Tutorial<\/p><\/div>\n<p><a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> is a very well known, and the most popular video watching website on the &#8220;net&#8221;, owned by <a target=_blank title='Google' gref='http:\/\/www.google.com'>Google<\/a>, and yesterday we started on a quest to do some work with the great <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> when we presented <a title='YouTube API Start and Stop Primer Tutorial' href='#yasaspt'>YouTube API Start and Stop Primer Tutorial<\/a> as shown below.<\/p>\n<p>We are not alone on this quest, we are sure, and today we use the API to sequence YouTube videos by adding to yesterday&#8217;s functionality with &#8230;<\/p>\n<ol>\n<li>use of an HTML <a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>form<\/a> element (<i>method=GET<\/i> <i>action=.\/stop_start_youtube.htm<\/i> <i>target=_self<\/i>) to collect follow up YouTube video ids the user wants to play<\/li>\n<li>catering for the user pausing the video, a practicality that could help give the user time to enter large numbers of follow up video &#8230; <a target=_blank title='Nala and Luna' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.htm?vid=kMGJ0VyUmvI&#038;playtime=-1000&#038;this=&#038;next=kMGJ0VyUmvI&#038;next2=k8015YUEeC0&#038;next3=cGdz3GNhEQ4&#038;next4=Ei_VUl8qdRU'><i>binge<\/i><\/a> anyone?!<\/li>\n<\/ol>\n<p>The <i>method=GET<\/i> is fine because &#8230;<\/p>\n<ol>\n<li>YouTube video ids are quite short and so many can be stored in a URL without overshooting the web server length limits here &#8230; and that means &#8230;<\/li>\n<li><i>method=GET<\/i> ensures all information is contained in <i>document.URL<\/i> and entirely processed by Javascript client methodologies without the <i>method=POST<\/i> complications of involving a serverside program like PHP in this web application&#8217;s architecture<\/li>\n<\/ol>\n<p>The <i>action=.\/stop_start_youtube.htm<\/i> <i>target=_self<\/i> combination means that the change of video becomes pretty seamless, into the same original webpage of interest, using the same original HTML and Javascript codebase of interest.<\/p>\n<p>And so the mechanism for making use of this optional video synchronizing, or sequencing, functionality is to answer the video duration question with a negative number reflecting the total number of videos to play, so, again, nothing radical has changed with the look of the web application as it starts as yesterday&#8217;s functionality is still pushed as the default functionality ideas of use.<\/p>\n<p>Here&#8217;s the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-GETME\" title='stop_start_youtube.html'>stop_start_youtube.htm<\/a>, changed from yesterday in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.htm\" title='Click picture'>live run<\/a> link for you to try this out yourself.<\/p>\n<hr>\n<p id='yasaspt'>Previous relevant <a target=_blank title='YouTube API Start and Stop Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-start-and-stop-primer-tutorial\/'>YouTube API Start and Stop 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\/karaoke_youtube_api.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Karaoke via YouTube API in Iframe Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.jpg\" title=\"Karaoke via YouTube API in Iframe Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Karaoke via YouTube API in Iframe Primer Tutorial<\/p><\/div>\n<p>We have a burgeoning <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Karaoke' title='Karaoke information from Wikipedia ... thanks'>Karaoke<\/a> web application idea for you today, as with WordPress 4.1.1&#8217;s <a target=_blank title='Karaoke via YouTube API in Iframe Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-primer-tutorial\/'>Karaoke via YouTube API in Iframe Primer Tutorial<\/a>, that builds on what we last left off with at <a title='YouTube API Iframe Synchronicity Resizing Tutorial' href='#yaisrt'>YouTube API Iframe Synchronicity Resizing Tutorial<\/a> as shown below.<\/p>\n<p>We use the HTML code off that tutorial and tweak it a bit to be able to play a <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> video at a designated place via the great YouTube <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>.<\/p>\n<p>This ability means a user can plan ahead for bits where the YouTube clip is played as is, and bits of silence where the user or users can sing along to bits that are very well known.<\/p>\n<p>Today&#8217;s featured execution of the resultant HTML and Javascript (grand)parent <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html_GETME\" title='karaoke_youtube_api.html'>karaoke_youtube_api.html<\/a> web application has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html\" title='karaoke_youtube_api.html'>generic live run<\/a> but as a special treat for any &#8220;sweet green icing&#8221; fans &#8230; know I am &#8230; the link below waits 3 times for you <a target=_blank href='http:\/\/genius.com\/Richard-harris-macarthur-park-lyrics' title='Thanks for Macarthur Park lyrics'>to sing<\/a> &#8230;<\/p>\n<blockquote cite='http:\/\/genius.com\/Richard-harris-macarthur-park-lyrics'><p>\nSomeone left the cake out in the rain<br \/>\nI don&#8217;t think that I can take it<br \/>\nCause it took so long to bake it<br \/>\nAnd I&#8217;ll never have that recipe again<br \/>\nOh, nooo!\n<\/p><\/blockquote>\n<p><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\" document.getElementById('imacarthurpark').style.display='block'; document.getElementById('imacarthurpark').src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html?youtubeid=CPMpeNDIGdk&#038;youtube_duration=449.0&#038;c0=on&#038;i0=0&#038;j0=60&#038;c1=on&#038;i1=80&#038;j1=124&#038;c2=on&#038;i2=144&#038;j2=396&#038;c3=on&#038;i3=416&#038;j3=449&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9='; \">Macarthur Park Karaoke<\/a> is shown below &#8230;<\/p>\n<p>\n<iframe id='imacarthurpark' title='Macarthur Park karaoke' style='height:700px; width:100%;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html'><\/iframe><\/p>\n<p>We want to thank this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/22726941\/youtube-api-get-current-video-title'>useful link<\/a> for their great help with extracting the YouTube video title, necessary today, to give the user context about what they &#8220;might&#8221; be singing along to &#8230; depending on their talent of course?!<\/p>\n<p>So what once was, and still is, a parent (HTML\/Javascript you could call <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> changes today in <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'>this way<\/a> and still has its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a>) becomes the child to the new Karaoke (grand)parent above.<\/p>\n<p>Today&#8217;s web application has a CSS &#8220;subtheme&#8221; today that exemplifies the usefulness of the CSS style properties &#8230;<\/p>\n<p><code><br \/>\ndisplay:inline; visibility: hidden;<br \/>\n<\/code><\/p>\n<p> &#8230; rather than just &#8230;<\/p>\n<p><code><br \/>\ndisplay:none;<br \/>\n<\/code><\/p>\n<p> &#8230; when it comes to reshowing HTML elements that are preferably &#8220;inline&#8221; by nature &#8230; ie. you&#8217;re trying to keep them on the same horizontal line of elements.  This first method sort of ensures that CSS &#8220;space&#8221; is left aside, even when the elements are invisible, so that when you &#8220;Javascript DOM&#8221; make then to be visible again via statements like &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById('dkaraoke').style.visibility='visible';<br \/>\n<\/code><\/p>\n<p> &#8230; this results in a much better &#8220;inline&#8221; result than does &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById('dkaraoke').style.display='inline';  \/\/ or 'block' or any other idea<br \/>\n<\/code><\/p>\n<p>We&#8217;ll be refining this Karaoke web application as time goes on, and hope you flex your singing voice trying it out yourself.<\/p>\n<hr>\n<p id='yaisrt'>Previous relevant <a target=_blank title='YouTube API Iframe Synchronicity Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-resizing-tutorial\/'>YouTube API Iframe Synchronicity Resizing 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\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"YouTube API Iframe Synchronicity Resizing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_dynamically_resize.jpg\" title=\"YouTube API Iframe Synchronicity Resizing Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Iframe Synchronicity Resizing Tutorial<\/p><\/div>\n<p>Today&#8217;s work concerns dynamic resize of HTML iframe child elements that could resize themselves because their parent HTML elements have changed size via user intervention.<\/p>\n<p>We want to show you this today to talk a bit about the CSS properties of &#8230;<\/p>\n<ul>\n<li>width<\/li>\n<li>height<\/li>\n<\/ul>\n<p> &#8230; and about the usefulness of &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='window.getComputedStyle information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/getComputedStyle'>window.getComputedStyle()<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to calculate the width or height, in pixels, of an HTML element, in our case that either &#8230;<\/p>\n<ul>\n<li>has no width nor height defined<\/li>\n<li>has a width and\/or height defined as a percentage<\/li>\n<\/ul>\n<p>So, think you will agree, that if you were following our current thread of tutorials yesterday, you&#8217;d have agreed, especially if you viewed it on a laptop, that the web application involving the &#8220;grid of television&#8221; HTML iframe elements could benefit from a bit more room given over to the HTML table housing the &#8220;grid of television&#8221; HTML iframe elements.  That is a pretty simple CSS change as per the <b>bold<\/b> bit below &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ntd { margin: 0 0 0 0; background-color: white;  }<br \/>\ndiv { margin: 0 0 0 0; }<br \/>\niframe { margin-left: 0px; }<br \/>\n<b>table { width: 100%; height: 90%; }<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then to change from this static arrangement to a user interventional additional control to width and height management how about the PHP <b>bold<\/b> bits below &#8230;<\/p>\n<p><code><br \/>\n<b>&lt;?php<br \/>\n  if (strpos($p1, \".\") !== false) {<br \/>\n     echo \"\\n <\/b>window.open('http:\/\/www.youtube.com\/watch?v=K5StTXQofqs', '_blank', 'top=50,left=50,width=500,height=500');<b> \\n\";<br \/>\n  } else {<br \/>\n     echo \"\\n document.getElementById('myh1').innerHTML=\\\"Enjoy the Videos ... &lt;span id=sw&gt;&lt;a style=color:red; onclick=rew(-1);&gt;-&lt;\/a&gt;Width (100%)&lt;a style=color:green; onclick=rew(1);&gt;+&lt;\/a&gt;&lt;\/span&gt; &lt;span id=sh&gt;&lt;a style=color:red; onclick=reh(-1);&gt;-&lt;\/a&gt;Height (90%)&lt;a style=color:green; onclick=reh(1);&gt;+&lt;\/a&gt;&lt;\/span&gt; ... Thanks &lt;a target=_blank title='YouTube' href='http:\/\/www.youtube.com'&gt;YouTube&lt;\/a&gt;\\\"; \\n\";<br \/>\n  }<br \/>\n?&gt;<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; and so this has the user in the &#8220;know&#8221; but what about the child &#8220;grid of television&#8221; HTML iframe elements being brought into the loop.  This can be achieved in the external Javascript involving, for the most part, a <b>new function<\/b> that runs constantly looking out for user interventional changes to the width and height of the parent&#8217;s HTML table element via &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction checkdim() {   \/\/ dynamic resizer of HTML iframe elements via examination of parent div elements<br \/>\n  var jv=1, dw=\"100%\", dh=\"100%\", ielem, wassrc='', wass;<br \/>\n  var elem1=document.getElementById('ptable');<br \/>\n  dh=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"height\").replace('px','').replace('%',''));<br \/>\n  dw=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"width\").replace('px','').replace('%',''));<br \/>\n  if (Math.abs(eval(dw) - eval(ptablew) + eval(dh) - eval(ptableh)) &gt; 0.9) {  \/\/ change to parent div elements detected<br \/>\n   ptablew=dw;<br \/>\n   ptableh=dh;<br \/>\n   wass=document.getElementById('myh1').innerHTML.split('~');<br \/>\n   document.getElementById('myh1').innerHTML=eval(dw) + ',' + eval(ptablew) + ',' + eval(dh) + ',' + eval(ptableh) + ' ~' + wass[1];<br \/>\n   \/\/alert(Math.abs(eval(dw) - eval(ptablew) + eval(dh) - eval(ptableh)));<br \/>\n   for (jv=1; jv&lt;=9; jv++) {<br \/>\n    elem1=document.getElementById(elarr[eval(-1 + jv)]);<br \/>\n    ielem=document.getElementById('if' + jv);<br \/>\n    wassrc=ielem.src;<br \/>\n    wass=wassrc.split('&this=');<br \/>\n    if (wass.length &gt; 1) {<br \/>\n      dh=eval(ptableh \/ 3); \/\/=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"height\").replace('px',''));<br \/>\n      dw=eval(ptablew \/ 3); \/\/=\"\" + eval(window.getComputedStyle(elem1, null).getPropertyValue(\"width\").replace('px',''));<br \/>\n      warr[eval(-1 + jv)]=eval(dw);<br \/>\n      harr[eval(-1 + jv)]=eval(dh);<br \/>\n      \/\/if (jv == 1) alert(\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?width=\" + dw + \"&height=\" + dh + \"&this=\" + wass[1]);<br \/>\n      ielem.src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html?width=\" + dw + \"&height=\" + dh + \"&this=\" + wass[1];<br \/>\n    }<br \/>\n   }<br \/>\n  } else {<br \/>\n   wass=document.getElementById('myh1').innerHTML.split('~');<br \/>\n   document.getElementById('myh1').innerHTML=eval(dw) + ',' + eval(ptablew) + ',' + eval(dh) + ',' + eval(ptableh) + ' ~' + wass[1];<br \/>\n  }<br \/>\n  setTimeout(checkdim,5000);<br \/>\n}<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; which gets us to changed programming source code &#8230;<\/p>\n<ul>\n<li>Supervisor HTML\/Javascript you could call <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> doesn&#8217;t change today and still has its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link &#8230; of &#8230;<\/li>\n<li>Called PHP you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php-GETME\" title=\"reveal_div.php\">reveal_div.php<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php-GETME\">this way<\/a> &#8230; as well as &#8230;<\/li>\n<li>Called HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.html-GETME\" title=\"reveal_div.html\">reveal_div.html<\/a> is unchanged &#8230; but &#8230;<\/li>\n<li>Called External Javascript you could call <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js---GETME'>longhover_sup.js<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js---GETME\">this way<\/a> to allow for user resizable YouTube video media usage in that &#8220;grid of televisions&#8221; mode of usage, via the <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a>.<\/li>\n<\/ul>\n<p>Again, we&#8217;ll leave you with a <a target=_blank title='Live run of tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php?p1=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4100%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p2=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4200%26from%3DkMGJ0VyUmvI%26to%3DkMGJ0VyUmvI&#038;p3=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4300%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p4=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4400%26from%3DEi_VUl8qdRU%26to%3DEi_VUl8qdRU&#038;p5=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4500%26from%3DY-FMqbwN_9g%26to%3DY-FMqbwN_9g&#038;p6=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4600%26from%3D6SBVw047-Mw%26to%3D6SBVw047-Mw&#038;p7=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4700%26from%3DLLtVd0c0tGXuTSbU5d8cSBUg%26to%3DLLtVd0c0tGXuTSbU5d8cSBUg&#038;p8=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4800%26from%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE%26to%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE&#038;p9=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4900%26from%3DuzmtNSKf_JQ%26to%3DuzmtNSKf_JQ\n'>live run<\/a> that helped piece together today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_dynamically_resize.jpg\">tutorial picture<\/a>, an improvement on &#8220;room to move&#8221; compared to yesterday, we hope you agree?<\/p>\n<hr>\n<p id='yaist'>Previous relevant <a target=_blank title='YouTube API Iframe Synchronicity Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-tutorial\/'>YouTube API Iframe Synchronicity 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\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"YouTube API Iframe Synchronicity Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_synchronize.jpg\" title=\"YouTube API Iframe Synchronicity Tutorial\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Iframe Synchronicity Tutorial<\/p><\/div>\n<p>Do you ever go into an electronics or electrical appliance store into the television section, and see all those television sets playing not always the same channel at once?   Mesmerising, huh?<\/p>\n<p>Have seen this also, in Real Estate windows.   Well, today, we allow up to 9 YouTube videos and\/or playlists to be played at once, just to give you a chance to &#8220;blow your mind&#8221;, especially for those expert multi-taskers amongst us.<\/p>\n<p>What we called on to facilitate this functionality today, building on the existing work up to <a title='YouTube API Video Playlist Tutorial' href='#yavpt'>YouTube API Video Playlist Tutorial<\/a>, as shown below, is &#8230;<\/p>\n<ol>\n<li>Our recent <a title='YouTube API Video Playlist Tutorial' href='#yavpt'>YouTube API Video Playlist Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>Our not so recent <a target=_blank title='External Javascript Genericity Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/external-javascript-genericity-follow-up-tutorial\/'>External Javascript Genericity Follow Up Tutorial<\/a><\/li>\n<\/ol>\n<p>So this HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8220;grid of television&#8221; functionality, to us, puts it in a &#8220;synchronization&#8221; category of tutorial, and because of the homogeneity of the media presentation &#8230; ie. we use YouTube videos and the YouTube API with 1 above &#8230; we think our synchronicities could work quite well, with less hit and miss, compared to previous <a target=_blank title='Synchronize tutorials at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize'>efforts<\/a> we&#8217;ve put in at this blog with non-homogeneous media types and presentations.  It has to be said, also, that that is the strength of using APIs to help with your software, as they tend to unify concepts, perhaps restricting what is allowed, to focus on a known set of inputs and outputs &#8230; EOR &#8230; end of rave.<\/p>\n<p>We feel a behove coming on &#8230; atchoobehove &#8230; that&#8217;s better &#8230; and so it behoves us to show you programming source code &#8230;<\/p>\n<ul>\n<li>Supervisor HTML\/Javascript you could call <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>, changed in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link &#8230; of &#8230;<\/li>\n<li>Called PHP you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php_GETME\" title=\"reveal_div.php\">reveal_div.php<\/a> is unchanged &#8230; as well as &#8230;<\/li>\n<li>Called HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.html-GETME\" title=\"reveal_div.html\">reveal_div.html<\/a> is unchanged &#8230; but &#8230;<\/li>\n<li>Called External Javascript you could call <a target=_blank title='longhover_sup.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js--GETME'>longhover_sup.js<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/longhover_sup.js--GETME\">this way<\/a> to allow for YouTube video media usage via the <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a>.<\/li>\n<\/ul>\n<p>We&#8217;ll leave you with a <a target=_blank title='Live run of tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_div.php?p1=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4100%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p2=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4200%26from%3DkMGJ0VyUmvI%26to%3DkMGJ0VyUmvI&#038;p3=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4300%26from%3DcGdz3GNhEQ4%26to%3DcGdz3GNhEQ4&#038;p4=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4400%26from%3DEi_VUl8qdRU%26to%3DEi_VUl8qdRU&#038;p5=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4500%26from%3DY-FMqbwN_9g%26to%3DY-FMqbwN_9g&#038;p6=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4600%26from%3D6SBVw047-Mw%26to%3D6SBVw047-Mw&#038;p7=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4700%26from%3DLLtVd0c0tGXuTSbU5d8cSBUg%26to%3DLLtVd0c0tGXuTSbU5d8cSBUg&#038;p8=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4800%26from%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE%26to%3DPLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE&#038;p9=%3Ftotal%3D9%26tag%3Ddiv%26period%3D4900%26from%3DuzmtNSKf_JQ%26to%3DuzmtNSKf_JQ\n'>live run<\/a> that helped piece together today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_synchronize.jpg\">tutorial picture<\/a>.<\/p>\n<hr>\n<p id='yavpt'>Previous relevant <a target=_blank title='YouTube API Video Playlist Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-video-playlist-tutorial\/'>YouTube API Video Playlist 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\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Video Playlist Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_api_playlist.jpg\" title=\"YouTube API Video Playlist Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Video Playlist Tutorial<\/p><\/div>\n<p><a target=_blank title='Playlist information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Playlist'>Playlists<\/a> are the topic we hone in on today with the continuation of our <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a> &#8220;knowledge quest&#8221; today, as with WordPress 4.1.1&#8217;s <a target=_blank title='YouTube API Video Playlist Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-video-playlist-tutorial\/'>YouTube API Video Playlist Tutorial<\/a>, building on yesterday&#8217;s <a title='YouTube API Start and Stop Resizing Tutorial' href='#yasascrt'>YouTube API Start and Stop Resizing Tutorial<\/a> as shown below.<\/p>\n<p>Perhaps your first exposure to a &#8220;playlist&#8221; was with the <a target=_blank title='iTunes information from Apple' href='http:\/\/www.apple.com\/au\/itunes\/'>iTunes<\/a> playlists, as receptacles for your favourite music in the form of a song list?  But &#8220;playlist&#8221; has morphed into so much more than with those early &#8220;heady&#8221; days of the <a target=_blank title='iPod information from Apple' href='http:\/\/www.apple.com\/au\/ipod\/'>iPod<\/a> we talked about with the <a target=_blank title='Kinesthetic iPod Learning Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/kinesthetic-ipod-learning-primer-tutorial\/'>Kinesthetic iPod Learning Primer Tutorial<\/a>, and we think of it today in terms of YouTube playlists of videos.  Think playlist, <a target=_blank title='Think Think Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/think-think-game-primer-tutorial\/'>think<\/a> media.<\/p>\n<p>The fact is, to us, looking at YouTube, there are two main sources for the concept of &#8220;receptacle&#8221; or &#8220;container&#8221; or &#8220;collection&#8221; of videos, that being &#8230;<\/p>\n<ol>\n<li>a <a target=_blank title='YouTube playlist' href='https:\/\/support.google.com\/youtube\/answer\/57792?hl=en'>playlist<\/a> &#8230; which can be created by anyone, as used by me to create the <a target=_blank title='Nala and Luna playlist' href='https:\/\/www.youtube.com\/watch?v=Ei_VUl8qdRU&#038;list=PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE'>Nala and Luna<\/a> &#8220;playlist&#8221;<\/li>\n<li>a <a target=_blank title='YouTube channel information' href='https:\/\/support.google.com\/youtube\/answer\/1646861?hl=en'>channel<\/a> &#8230; which is a concept you use to upload content to YouTube, and you register with YouTube to create &#8230; here is an <a target=_blank title='YouTube channel for RJM Programming' href='http:\/\/www.youtube.com\/rmetcalfeify'>RJM Programming one (channel)<\/a><\/li>\n<\/ol>\n<p>As you might expect from the explanation above, you need to sign up for a Google YouTube API <a target=_blank title='YouTube API Developer Key' href='https:\/\/developers.google.com\/youtube\/v3\/getting-started#intro'>Developer Key<\/a> to glean information about a YouTube &#8220;channel&#8221; of interest, but &#8220;playlists&#8221; are that little bit more public, and you can point at a YouTube &#8220;playlist&#8221; of interest via a URL like &#8230;<\/p>\n<p><code><br \/>\n&lt;a target=_blank title='Google Developers playlist' href='https:\/\/www.youtube.com\/watch?v=URuOw1Pi58Y&list=LLtVd0c0tGXuTSbU5d8cSBUg'&gt;<a target=_blank title='Google Developers playlist' href='https:\/\/www.youtube.com\/watch?v=URuOw1Pi58Y&#038;list=LLtVd0c0tGXuTSbU5d8cSBUg'>https:\/\/www.youtube.com\/watch?v=URuOw1Pi58Y&list=LLtVd0c0tGXuTSbU5d8cSBUg<\/a>&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and so, with that in mind, we don&#8217;t try to reinvent wheels here with our new functionality of &#8220;playlist&#8221; inclusion today, but simply access one of those URLs like above via an API call like &#8230;<\/p>\n<p><code><br \/>\nvar yturlis=player.<a target=_blank title='YouTube API Retriving video information' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Retrieving_video_information'>getVideoUrl<\/a>();<br \/>\n<\/code><\/p>\n<p> &#8230; and let the brilliance of the YouTube API add all this great &#8220;linked (video) list&#8221; functionality (you can see working in today&#8217;s <a target=_blank title='Click picture' href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_api_playlist.jpg\">tutorial picture<\/a>) to our (still only) HTML and Javascript web application you could call <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>, changed from yesterday in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link for you to try this &#8220;playlist&#8221; functionality out for yourself.<\/p>\n<hr>\n<p id='yasascrt'>Previous relevant <a target=_blank title='YouTube API Start and Stop Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-start-and-stop-resizing-tutorial\/'>YouTube API Start and Stop Resizing 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.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Video Resizing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_api_more.jpg\" title=\"YouTube API Video Resizing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Video Resizing Tutorial<\/p><\/div>\n<p>We continue with our <a target=_blank title='YouTube' href='http:\/\/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 embedded videos<\/a> today building on yesterday&#8217;s <a title='YouTube API Start and Stop Synchronizing Tutorial' href='#yasascst'>YouTube API Start and Stop Synchronizing Tutorial<\/a> as shown below.<\/p>\n<p>The matters we&#8217;d like to direct your attention to today are &#8230;<\/p>\n<ul>\n<li>width and height of YouTube embedded Iframe player<\/li>\n<li>audio volume<\/li>\n<li>video playback rate<\/li>\n<li>video playback quality<\/li>\n<\/ul>\n<p> &#8230; respectively involving API reference to &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Loading_a_Video_Player'>width and height of YouTube embedded Iframe player<\/a> are parameters for the &#8220;Player&#8221; constructor, and we don&#8217;t use it, but you can <a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_controls'>dynamically change width and height<\/a> via methods are discussed under &#8220;Setting the player size&#8221;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_controls'>audio volume<\/a> methods are discussed under &#8220;Changing the player volume&#8221;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_controls'>video playback rate<\/a> methods are discussed under &#8220;Setting the playback rate&#8221;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/youtube\/iframe_api_reference#Playback_quality'>video playback quality<\/a> methods are discussed under &#8220;Playback quality&#8221;<\/li>\n<\/ul>\n<p>Here&#8217;s the updated HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--GETME\" title='stop_start_youtube.html'>stop_start_youtube.htm<\/a>, changed from yesterday in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.htm\" title='Click picture'>live run<\/a> link for you to try these new ideas yourself.<\/p>\n<hr>\n<p id='yasascst'>Previous relevant <a target=_blank title='YouTube API Start and Stop Synchronizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-start-and-stop-synchronizing-tutorial\/'>YouTube API Start and Stop Synchronizing 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.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Video Synchronizing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_synchronizing.jpg\" title=\"YouTube API Video Synchronizing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Video Synchronizing Tutorial<\/p><\/div>\n<p><a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> is a very well known, and the most popular video watching website on the &#8220;net&#8221;, owned by <a target=_blank title='Google' gref='http:\/\/www.google.com'>Google<\/a>, and yesterday we started on a quest to do some work with the great <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> when we presented <a title='YouTube API Start and Stop Primer Tutorial' href='#yasaspt'>YouTube API Start and Stop Primer Tutorial<\/a> as shown below.<\/p>\n<p>We are not alone on this quest, we are sure, and today we use the API to sequence YouTube videos by adding to yesterday&#8217;s functionality with &#8230;<\/p>\n<ol>\n<li>use of an HTML <a target=_blank title='Javascript DOM document.write method information from wschools' href='http:\/\/www.w3schools.com\/html\/html_forms.asp'>form<\/a> element (<i>method=GET<\/i> <i>action=.\/stop_start_youtube.htm<\/i> <i>target=_self<\/i>) to collect follow up YouTube video ids the user wants to play<\/li>\n<li>catering for the user pausing the video, a practicality that could help give the user time to enter large numbers of follow up video &#8230; <a target=_blank title='Nala and Luna' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.htm?vid=kMGJ0VyUmvI&#038;playtime=-1000&#038;this=&#038;next=kMGJ0VyUmvI&#038;next2=k8015YUEeC0&#038;next3=cGdz3GNhEQ4&#038;next4=Ei_VUl8qdRU'><i>binge<\/i><\/a> anyone?!<\/li>\n<\/ol>\n<p>The <i>method=GET<\/i> is fine because &#8230;<\/p>\n<ol>\n<li>YouTube video ids are quite short and so many can be stored in a URL without overshooting the web server length limits here &#8230; and that means &#8230;<\/li>\n<li><i>method=GET<\/i> ensures all information is contained in <i>document.URL<\/i> and entirely processed by Javascript client methodologies without the <i>method=POST<\/i> complications of involving a serverside program like PHP in this web application&#8217;s architecture<\/li>\n<\/ol>\n<p>The <i>action=.\/stop_start_youtube.htm<\/i> <i>target=_self<\/i> combination means that the change of video becomes pretty seamless, into the same original webpage of interest, using the same original HTML and Javascript codebase of interest.<\/p>\n<p>And so the mechanism for making use of this optional video synchronizing, or sequencing, functionality is to answer the video duration question with a negative number reflecting the total number of videos to play, so, again, nothing radical has changed with the look of the web application as it starts as yesterday&#8217;s functionality is still pushed as the default functionality ideas of use.<\/p>\n<p>Here&#8217;s the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-GETME\" title='stop_start_youtube.html'>stop_start_youtube.htm<\/a>, changed from yesterday in <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'>this way<\/a> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.htm\" title='Click picture'>live run<\/a> link for you to try this out yourself.<\/p>\n<hr>\n<p id='yasaspt'>Previous relevant <a target=_blank title='YouTube API Start and Stop Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-start-and-stop-primer-tutorial\/'>YouTube API Start and Stop 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\/stop_start_youtube.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API Stop and Start Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_start_stop.jpg\" title=\"YouTube API Start and Stop Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">YouTube API Start and Stop Primer Tutorial<\/p><\/div>\n<p><a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a> is a very well known, and the most popular video watching website on the &#8220;net&#8221;.<\/p>\n<p>It is no surprise that programmers and developers everywhere are interested in interfacing to it.  We interface to it today, just purely with client side HTML and Javascript and the wonderful <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> reference website, the information for which we got directed to via this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/6970013\/getting-current-youtube-video-time'>useful link<\/a> &#8230; so thanks, everybody.<\/p>\n<p>Using the YouTube API means you&#8217;ve got access to information, such as &#8230;<\/p>\n<ul>\n<li>the total length of the video clip<\/i>\n<li>the accumulated length you have watched<\/li>\n<\/ul>\n<p> &#8230; without which it is hard to do what we want to do today.  And that is simply to ask you for &#8230;<\/p>\n<ol>\n<li>YouTube video identifier<\/li>\n<li>how many seconds do you want to use to start and stop your way through the viewing &#8230; -1 here let&#8217;s you view the whole video in one session<\/li>\n<\/ol>\n<p>This exercise was helped enormously by the great example code at the <a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> reference website.<\/p>\n<p>Here&#8217;s the HTML and Javascript code you could call <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> with its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" title='Click picture'>live run<\/a> link, as well.<\/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='#d22484' onclick='var dv=document.getElementById(\"d22484\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/api\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22484' 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='#d22496' onclick='var dv=document.getElementById(\"d22496\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22496' 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='#d22510' onclick='var dv=document.getElementById(\"d22510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22510' 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='#d22543' onclick='var dv=document.getElementById(\"d22543\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/playlist\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22543' 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='#d22611' onclick='var dv=document.getElementById(\"d22611\"); 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='d22611' 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='#d22650' onclick='var dv=document.getElementById(\"d22650\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d22650' 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='#d25283' onclick='var dv=document.getElementById(\"d25283\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25283' 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='#d25307' onclick='var dv=document.getElementById(\"d25307\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ux\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25307' 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='#d25334' onclick='var dv=document.getElementById(\"d25334\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25334' 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='#d25351' onclick='var dv=document.getElementById(\"d25351\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/microphone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25351' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It was always a plan with the &#8220;Karaoke via YouTube API&#8221; that we would try to &#8220;splice&#8221; in user contributions for a more real &#8220;Karaoke&#8221; experience. I&#8217;ve done work on this before, and it takes a lot of web server &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-microphone-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":[2,12,14,15,37],"tags":[85,88,113,281,354,372,1538,476,477,513,576,578,587,652,2016,714,744,781,822,860,2018,997,2019,1670,1319,1350,1356,1369,1493,2017],"class_list":["post-25351","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-apache","tag-api","tag-audio","tag-css","tag-dom","tag-easyphp","tag-embed","tag-game","tag-games-2","tag-google","tag-html","tag-html5","tag-iframe","tag-javascript","tag-karaoke","tag-local-web-server","tag-mamp","tag-microphone","tag-music-2","tag-onblur","tag-onstatechanged","tag-programming","tag-snapchat","tag-synchronize","tag-tutorial","tag-user-experience","tag-ux","tag-video","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25351"}],"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=25351"}],"version-history":[{"count":17,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25351\/revisions"}],"predecessor-version":[{"id":25374,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25351\/revisions\/25374"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}