diff --git a/docs/_includes/demo.html b/docs/_includes/demo.html
index f94feaa..d0a3e6a 100755
--- 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
index a14b9c6..638c125 100755
--- 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;
+}