diff --git a/docs/src/components/demo.js b/docs/src/components/demo.js
new file mode 100644
index 00000000..db83caba
--- /dev/null
+++ b/docs/src/components/demo.js
@@ -0,0 +1,18 @@
+import React from "react"
+
+const Demo = () => {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <iframe
+        width="100%"
+        height="600"
+        src="https://www.youtube.com/embed/lis7vG-D4bA?mute=1&loop=1&modestbranding=1&rel=0"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+        allowfullscreen
+      ></iframe>
+    </div>
+  )
+}
+
+export default Demo
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index d0d46036..a09c9298 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -1,6 +1,7 @@
 import React from "react"
 
 import Layout from "../components/layout"
+import Demo from "../components/demo"
 import BasicMode from "../components/basic-mode"
 import Readability from "../components/readability"
 import Code from "../components/code"
@@ -30,7 +31,7 @@ const IndexPage = () => (
 
     <CarouselProvider
       isPlaying
-      totalSlides={4}
+      totalSlides={5}
       naturalSlideWidth={1200}
       naturalSlideHeight={890}
     >
@@ -50,6 +51,10 @@ const IndexPage = () => (
         <Slide index={3}>
           <Shortcuts />
         </Slide>
+
+        <Slide index={4}>
+          <Demo />
+        </Slide>
       </Slider>
 
       <div style={{ textAlign: "center" }}>