{"id":30843,"date":"2017-06-18T03:01:43","date_gmt":"2017-06-17T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=30843"},"modified":"2017-06-18T09:16:12","modified_gmt":"2017-06-17T23:16:12","slug":"youtube-embedded-video-in-iframe-api-regex-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-video-in-iframe-api-regex-tutorial\/","title":{"rendered":"YouTube Embedded Video in Iframe API RegEx Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"YouTube Embedded Video in Iframe API RegEx Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_brazil.jpg\" title=\"SSL Web Application Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Video in Iframe API RegEx Tutorial<\/p><\/div>\n<p>We&#8217;ve said many&#8217;s a time it&#8217;s good to revisit code and its workings.  A break from it makes you forget to be optimistic, and be more realistic.  So it was the other day with our <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------GETME\" title='karaoke_youtube_api.htm'>karaoke_youtube_api.htm<\/a> interfacing web application, 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.htm'>this way<\/a> today.  In fact, way back to its earliest times &#8230; and they can be the most optimistic, after all &#8230; this web application has contained the &#8220;weakness&#8221; in logical thinking, that is there, as of now, <i>less so<\/i>.   How can we only say &#8220;<i>less so<\/i>&#8220;?  It is a matter of probabilities, for us, and a lot of other design systems.  Design systems should try not to complicate.  We are participating with this &#8220;spirit of design&#8221; with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='Click picture'>our web application<\/a> having the one &#8220;region&#8221; of user interaction only, when they first enter the workings of it.   We like it pared down this way, but in the process of allowing the user to be flexible, or not, by having that one HTML input type=text element, accept either a &#8230;<\/p>\n<ol>\n<li>eleven character YouTube video ID &#8230; or &#8230;<\/li>\n<li>anything else non-blank means search the YouTube &#8220;database&#8221; for what you have entered as a search of their video titles<\/li>\n<\/ol>\n<p> &#8230; but in so doing, allowing advanced users some latitude, or more nervous users a narrow focus (a combination we tend to want to promote) we were &#8230;<\/p>\n<ul>\n<li>too dumb with our code &#8230; and &#8230;<\/li>\n<li>also not thinking to the future<\/li>\n<\/ul>\n<p>Let me explain.  Our way of differentiating the two types of &#8220;entry types&#8221; above was, in broad brush terms, for non-blank entries &#8230;<\/p>\n<ul>\n<li>blank characters not at the ends of the string means second YouTube Search &#8220;entry type&#8221; &#8230; else &#8230;<\/li>\n<li>greater than 11 characters means second YouTube Search &#8220;entry type&#8221; &#8230; else &#8230;<\/li>\n<li>is first YouTube ID &#8220;entry type&#8221;<\/li>\n<\/ul>\n<p> &#8230; which we found was pretty dumb, when, in reapproaching the running of this web application, in all innocence today, we entered &#8220;Brazil&#8221;.  &#8220;Brazil&#8221; has no leading blanks and is not greater than 11 characters long, and so the web application tries to interpret it as a YouTube ID, which, of course it is not.  Now that&#8217;s obvious, and we&#8217;ll attend to the weakness.  As a first thought on dealing with this weakness, we thought, naturally, of enforcing the 11 character restriction, that nowadays YouTube IDs use.  But what of the future?  It is not set in stone that the 11 characters will be enough forever.  We&#8217;re not saying we&#8217;ll be around for the change, perhaps to 12 either, but if you see something reasonably easy to try to deal with there and then, you may as well cater for a bit further into the future.  That means, though, that a RegEx object functionality improvement cannot work in that definitive length scenario, which is a bit sad, but is not the end of the world for considering RegEx matching as a good technique to improve things.  What about the character set YouTube allows with its video IDs?  We got two pearls of information from &#8220;surfing the net&#8221;, those being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Useful link' href='https:\/\/webapps.stackexchange.com\/questions\/13854\/are-youtube-codes-guaranteed-to-always-be-11-characters'>this useful link<\/a> helped us to confirm what we&#8217;d always felt using <a target=_blank title='YouTube' href='https:\/\/www.youtube.com'>YouTube<\/a> that the character set allowed for a YouTube ID is &#8230;<br \/>\n<blockquote cite='https:\/\/webapps.stackexchange.com\/questions\/13854\/are-youtube-codes-guaranteed-to-always-be-11-characters'><p>\n2*26 letters (lowercase and uppercase) + 10 for the digits, + 2 for &#8220;_&#8221; and &#8220;-&#8221; chars\n<\/p><\/blockquote>\n<p> &#8230; thanks, and &#8230;\n<\/li>\n<li><a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/3028642\/regular-expression-for-letters-numbers-and'>this other useful link<\/a> mentions a RegEx object expression exactly down the lines for our purpose, and so, integrated into the new logic of the HTML code above &#8230; maybe dealing with a YouTube thought too?! (relook &#8230; no, based on &#8220;filename&#8221; thinking) &#8230; so, thanks<\/li>\n<\/ul>\n<p>So in three places where we used to have code like &#8230;<\/p>\n<p><code><br \/>\nif (vtxt.length &gt; \"URuOw1Pi58Y\".length || vtxt.trim().indexOf(' ') != -1) {<br \/>\n\/\/ more code here<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; we&#8217;ve changed to look something like &#8230;<\/p>\n<p><code><br \/>\nif (vtxt.<a target=_blank title='Javascript RegEx match method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_match.asp'>match<\/a>(\/^[a-zA-Z0-9_-]*$\/) == false || (vtxt.length &lt; \"URuOw1Pi58Y\".length || vtxt.length &gt; 12) || vtxt.trim().indexOf(' ') != -1) {<br \/>\n\/\/ more code here<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Some of the history of this web application being put through some &#8220;SSL thinking&#8221; is shown below with <a title='SSL Web Application Primer Tutorial' href='#swapt'>SSL Web Application Primer Tutorial<\/a>.<\/p>\n<hr>\n<p id='swapt'>Previous relevant <a target=_blank title='SSL Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ssl-web-application-primer-tutorial\/'>SSL Web Application Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"SSL Web Application Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.jpeg\" title=\"SSL Web Application Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">SSL Web Application Primer Tutorial<\/p><\/div>\n<p>What is your biggest friend for command line Linux text editing work, in our books <font size=1>&#8230; but not our pamphlettes<\/font>?  The text editor <a target=_blank href='https:\/\/www.computerhope.com\/unix\/uvi.htm' title='Computerhope vi information'><i>vi<\/i><\/a> and for our recent <a target=_blank title='SSL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Transport_Layer_Security'>SSL<\/a> work &#8230;<\/p>\n<p><code><br \/>\n&lt;ESC&gt; key<br \/>\ng\/http:\/s\/\/\/g<br \/>\nwq!<br \/>\n<\/code><\/p>\n<p>This is the level of automation enough for us, but if you are the brave type there are also Linux command line ideas where you can call on <i>cat<\/i> and <i>sed<\/i> ideas that we exemplify in <a target=_blank title='Linux Global Substitutions Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/linux-global-substitutions-primer-tutorial\/'>Linux Global Substitutions Primer Tutorial<\/a>.<\/p>\n<p>These SSL code &#8220;conversion&#8221; thoughts should not be &#8220;glossed over&#8221; in a generic way.  Take the case (as we do in WordPress 4.1.1&#8217;s <a target=_blank title='SSL Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ssl-web-application-primer-tutorial\/'>SSL Web Application Primer Tutorial<\/a>) of our <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------GETME\" title='karaoke_youtube_api.htm'>karaoke_youtube_api.htm<\/a> interfacing web application with this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='Click picture'>live run<\/a> link.  We needed it to change 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.htm'>this way<\/a> for the <i>ht<\/i><i>tps:\/\/<\/i> protocol, and you&#8217;ll notice in these changes that, indeed, most of the change is the usual <i>ht<\/i><i>tp:\/\/<\/i> mapping to <i>\/\/<\/i> but what about the (jQuery Ajax related) <b>changes<\/b> &#8230;<\/p>\n<p><code><br \/>\n\/\/ code above defines (var) qsel<br \/>\n<b>var dprefix=\"ht\" + \"tp:\/\/www.youtube.com\/results?search_query=\";<\/b><br \/>\nvar dp=\"<b>ht\" + \"tp:<\/b>\/\/www.rjmprogramming.com.au\/HTMLCSS\/\";<br \/>\n<b>if (document.URL.indexOf('ht' + 'tps:') == 0) dp=dp.replace('tp:','tps:');<br \/>\nif (document.URL.indexOf('ht' + 'tps:') == 0) dprefix=dprefix.replace('tp:','tps:');<\/b><br \/>\n$.ajax({ url: dp + \"legend_via_map.php\",<br \/>\ndata: {\"url\":<b>dprefix<\/b> + qsel},<br \/>\ntype: 'get',<br \/>\nsuccess: function(output) {<br \/>\n  \/\/ more code<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; where we need &#8220;other evidence&#8221;, in other words, the &#8220;scouring&#8221; of the protocol of the incoming URL (in Javascript DOM&#8217;s <i>document.URL<\/i>) to piece together the jQuery Ajax URLs involved.<\/p>\n<p>Again, we recommend a client side web inspector like Firefox&#8217;s Tools-&gt;Web Developer-&gt;Inspector Console tab for this nutting out of SSL issues, the majority of which will involve a &#8220;Mixed Content&#8221; scenario, in our experience.  We add one other &#8220;thought&#8221; tool to your armoury today, though.  If you are like us, you will have &#8220;child&#8221; HTML iframe elements involved, and there will be right click (Windows) or two finger gesture (Mac OS X) ways to open an iframe &#8220;child&#8221; window into a new web browser tab, and this can help declutter the Web Inspector goings on for we mere mortal &#8220;tired little brains&#8221; on occasions.<\/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='#d29993' onclick='var dv=document.getElementById(\"d29993\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ssl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29993' 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='#d30843' onclick='var dv=document.getElementById(\"d30843\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30843' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve said many&#8217;s a time it&#8217;s good to revisit code and its workings. A break from it makes you forget to be optimistic, and be more realistic. So it was the other day with our YouTube video via its Embedded &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-video-in-iframe-api-regex-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[52,69,354,386,2192,576,652,663,707,997,1040,2226,1043,1114,1115,1682,1319,1345,1368,1402],"class_list":["post-30843","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-absolute-url","tag-ajax","tag-dom","tag-encryption","tag-firefox-inspector","tag-html","tag-javascript","tag-jquery","tag-linux","tag-programming","tag-regex","tag-regexp","tag-regular-expression","tag-security","tag-sed","tag-ssl","tag-tutorial","tag-url","tag-vi","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30843"}],"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=30843"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30843\/revisions"}],"predecessor-version":[{"id":30860,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30843\/revisions\/30860"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=30843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=30843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=30843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}