{"id":42138,"date":"2018-12-03T03:01:04","date_gmt":"2018-12-02T17:01:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42138"},"modified":"2018-12-03T05:22:11","modified_gmt":"2018-12-02T19:22:11","slug":"youtube-embedded-iframe-api-hybrid-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-hybrid-tutorial\/","title":{"rendered":"YouTube Embedded Iframe API Hybrid Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Hybrid Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list_hybrid.jpg\" title=\"YouTube Embedded Iframe API Hybrid Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Hybrid Tutorial<\/p><\/div>\n<p>We&#8217;ve started on a hybrid approach on top of the &#8230;<\/p>\n<ul>\n<li>conventional YouTube &#8220;embed&#8221; style URLs of HTML embedded iframe elements of yesterday&#8217;s <a title='YouTube Embedded Iframe API Player Parameters Tutorial' href='#yteiapippt'>YouTube Embedded Iframe API Player Parameters Tutorial<\/a> &#8230; by, today &#8230;<\/li>\n<li>for the Video ID dropdown option (&#8220;v&#8221; URL) functionality (of an HTML div element) we use <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 video<\/a> calls<\/li>\n<\/ul>\n<p> &#8230; and you will see in future blog postings how this Object Oriented approach can add to the possibilities for use with this web application.<\/p>\n<p>This hybridising tells you that two quite different coding approaches can live quite happily within the one web application, especially with the very flexible Javascript language.<\/p>\n<p>Again, try this early days work for yourself with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.html-GETME\" title=\"youtube_list.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.html-GETME\" title=\"youtube_list.htm\">youtube_list.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.htm\" title=\"Click list\">live run<\/a> to see what we mean.  It incorporates a new combination of ideas, that being to &#8230;<\/p>\n<hr>\n<p id='yteiapippt'>Previous relevant <a target=_blank title='YouTube Embedded Iframe API Player Parameters Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-player-parameters-tutorial\/'>YouTube Embedded Iframe API Player Parameters 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\/youtube_list.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Player Parameters Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.jpg\" title=\"YouTube Embedded Iframe API Player Parameters Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Player Parameters Tutorial<\/p><\/div>\n<p>We&#8217;re <a target=_blank title='YouTube API here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube-api'>forever talking about<\/a> the great <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>, and that is why we revisit that last link for rereads quite often.  We&#8217;ll have not taken it all in, and need to broaden our horizons, we find.  So revisit, we did again today, and found a &#8220;new angle&#8221; (sort of like the one my Springer Spaniel (Luna) gives me with her head) on which to view this topic, via the YouTube <a target=_blank title='YouTube Embedded Iframe information' href='https:\/\/developers.google.com\/youtube\/player_parameters'>Player Parameters<\/a> webpage.<\/p>\n<p>It occurs to us we can break a video embedded HTML iframe presentation of YouTube video data into four presentation modes &#8230;<\/p>\n<ul>\n<li>Video ID<\/li>\n<li>Playlist ID<\/li>\n<li>Uploaded Videos of a User ID<\/li>\n<li>Search Word(s)<\/li>\n<\/ul>\n<p> &#8230; and let the really great (YouTube) &#8220;native&#8221; linked list display feeling look of the webpage be presented to the user.  Great simple result of a web application, thanks to the YouTube <a target=_blank title='YouTube Embedded Iframe information' href='https:\/\/developers.google.com\/youtube\/player_parameters'>Player Parameters<\/a> webpage.<\/p>\n<p>Try this early days work for yourself at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.html_GETME\" title=\"youtube_list.html\">youtube_list.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/youtube_list.html\" title=\"Click list\">live run<\/a> to see what we mean.  It incorporates a new combination of ideas, that being to &#8230;<\/p>\n<ul>\n<li>establish an example <a target=_blank title='HTML placeholder attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_placeholder.asp'>placeholder<\/a> attribute on the HTML input type=text element <b>as per<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;input type=text title='Double click for suggestion' <i>ondblclick='this.value=this.placeholder;'<\/i> style=width:30%; onblur=goplay(this.value); id=isuffix <b>placeholder='M7lc1UVf-VE'<\/b>&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li>use the usually useless <i>ondblclick<\/i> event of an input type=text element to &#8220;map&#8221; that <b>placeholder<\/b> value to the value of the input element awaiting the onblur event &#8220;tabbing out&#8221; to activate the HTML iframe contents<\/li>\n<\/ul>\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='#d42116' onclick='var dv=document.getElementById(\"d42116\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/whatsapp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42116' 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='#d42138' onclick='var dv=document.getElementById(\"d42138\"); 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='d42138' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve started on a hybrid approach on top of the &#8230; conventional YouTube &#8220;embed&#8221; style URLs of HTML embedded iframe elements of yesterday&#8217;s YouTube Embedded Iframe API Player Parameters Tutorial &#8230; by, today &#8230; for the Video ID dropdown option &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-hybrid-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[342,576,587,652,860,1666,2643,997,1319,1493,2017],"class_list":["post-42138","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-div","tag-html","tag-iframe","tag-javascript","tag-onblur","tag-ondblclick","tag-placeholder","tag-programming","tag-tutorial","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42138"}],"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=42138"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42138\/revisions"}],"predecessor-version":[{"id":42140,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42138\/revisions\/42140"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=42138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=42138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=42138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}