fix: show video controls only on hover not when play starts (#67)

zeno-ml · Jan 8, 2024 · c117e26 · c117e26
1 parent 9a4a807
commit c117e26
Showing 1 changed file with 19 additions and 3 deletions.
diff --git 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>
   );