{"id":37921,"date":"2018-05-05T03:01:50","date_gmt":"2018-05-04T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=37921"},"modified":"2018-05-04T22:07:14","modified_gmt":"2018-05-04T12:07:14","slug":"dynamic-javascript-and-the-youtube-embedded-api-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-and-the-youtube-embedded-api-tutorial\/","title":{"rendered":"Dynamic Javascript and the YouTube Embedded API Tutorial"},"content":{"rendered":"
\"Dynamic<\/a>

Dynamic Javascript and the YouTube Embedded API Tutorial<\/p><\/div>\n

Webpages without Javascript are generally pretty static and boring. Javascript is that dynamic client addition to webpage functionality, but perhaps you only think of it as that statically written part of the webpage unable to be reloaded into effect after that initial webpage load. Well, that is not taking into account Javascript such as …<\/p>\n


\n<script>
\n var tag = document.createElement<\/a>('script');
\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";
\n var firstScriptTag = document.getElementsByTagName('script')[0];
\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
\n<\/script>
\n<\/code><\/p>\n

… taken from the excellent YouTube IFrame Player API<\/a> we really like to use around here to embed and control YouTube<\/a> videos embedded into an HTML iframe<\/a> element.<\/p>\n

In today’s small extension of that we load nine such HTML iframe embedded YouTube videos into a 3×3 grid. We resisted the previous Brady Bunch usage<\/a> of such an arrangement (perhaps you’ll be sad to hear?!) in favour of showing you a “collage” of video snippets from one of my favourite films ever, Mr Smith Goes to Washington<\/a>.<\/p>\n

We hope the HTML and Javascript dynamic_js.html<\/a>‘s code will be food for thought, that you can test for yourself at this live run<\/a> link.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n