diff --git a/src/components/Demo/Demo.tsx b/src/components/Demo/Demo.tsx
index 2546cf8..545ff8a 100644
--- a/src/components/Demo/Demo.tsx
+++ b/src/components/Demo/Demo.tsx
@@ -2,10 +2,26 @@ import React from "react";
 import styles from "./index.module.css";
 
 export function Demo() {
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+
   return (
-    <div style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}>
-      <video controls autoPlay={true} loop className={styles.demo} muted>
-        <source src={require("@site/static/img/teaser.mp4").default} type="video/mp4"></source>
+    <div
+      style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}
+    >
+      <video
+        playsInline
+        autoPlay={true}
+        loop
+        className={styles.demo}
+        muted
+        onMouseOver={() => (videoRef.current.controls = true)}
+        onMouseOut={() => (videoRef.current.controls = false)}
+        ref={videoRef}
+      >
+        <source
+          src={require("@site/static/img/teaser.mp4").default}
+          type="video/mp4"
+        ></source>
       </video>
     </div>
   );