fix(docs): responsive youtube video demo

Author: lauthieb

docs/_includes/demo.html

@@ -1,6 +1,8 @@
 <section id="contact" class="contact bg-primary">
   <div class="container">
     <h2 class="section-heading">Demo</h2>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/lfWRwwmX9Q8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+    <div class="responsive-yt">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/lfWRwwmX9Q8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    </div>
   </div>
 </section>

docs/_includes/head.html

@@ -28,6 +28,23 @@
 
     <link rel="icon" href="img/favicon.ico" />
 
+    <style>
+        .responsive-yt { 
+            overflow:hidden; 
+            padding-bottom:56.25%; 
+            position:relative; 
+            height:0;
+        }
+
+        .responsive-yt iframe {
+            left:0; 
+            top:0; 
+            height:100%;
+            width:100%;
+            position:absolute;
+        }
+    </style>
+
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>

docs/_sass/_base.scss

@@ -662,5 +662,3 @@ body {
     }
   }
 }
-
-