fix(docs): responsive youtube video demo

lauthieb · Aug 18, 2023 · 748729a · 748729a
1 parent 2b25fc7
commit 748729a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/docs/_includes/demo.html b/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>
diff --git a/docs/_sass/_base.scss b/docs/_sass/_base.scss
@@ -663,4 +663,18 @@ body {
   }
 }
 
+.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;
+}