Use YT JS-based lazy-load (#89)

Author: arcivanov

_includes/layout/footer.html

@@ -28,7 +28,7 @@
     $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
   });
 </script>
-<script>
+<script type="text/javascript">
     $(function() {
         $(".dropdown").hover(
             function(){ $(this).addClass('open') },
@@ -42,3 +42,12 @@
         );
     });
 </script>
+<script type="text/javascript">
+ function init() {
+var vidDefer = document.getElementsByTagName('iframe');
+for (var i=0; i<vidDefer.length; i++) {
+if(vidDefer[i].getAttribute('data-src')) {
+vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
+} } }
+window.onload = init;
+</script>

index.html

@@ -206,9 +206,8 @@ <h2>
                     Watch the Presentation
                 </h2>
                 <div class="embed-responsive embed-responsive-16by9">
-                    <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/iQU18hAjux4"
+                    <iframe class="embed-responsive-item" width="560" height="315" src="" data-src="https://www.youtube.com/embed/iQU18hAjux4"
                             title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                            loading="lazy"
                             allowfullscreen></iframe>
                 </div>
             </div>