add video to homepage (#1050)

documentation/src/components/HomepageFeatures/index.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import Heading from "@theme/Heading";
 import styles from "./styles.module.css";
@@ -164,35 +165,42 @@ function Quote({ name, github, role, testimonial }: FeatureQuote) {
 }
 
 export default function HomepageFeatures(): ReactNode {
+  const videoRef = useRef<HTMLIFrameElement>(null);
+  const [videoLoaded, setVideoLoaded] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !videoLoaded) {
+            setVideoLoaded(true); // Load video only when it first appears
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+
+    if (videoRef.current) {
+      observer.observe(videoRef.current);
+    }
+
+    return () => {
+      if (videoRef.current) {
+        observer.unobserve(videoRef.current);
+      }
+    };
+  }, [videoLoaded]);
+
   return (
     <section className={styles.features}>
       <div className="container">
         <div className="row">
           <div className={styles.videoContainer}>
-            <video
+            <video className={`${styles.video} hide-in-dark`} autoPlay loop muted playsInline>
-              className={`${styles.video} hide-in-dark`}
+              <source src={require("@site/static/videos/hero_light.mp4").default} type="video/mp4" />
-              autoPlay
-              loop
-              muted
-              playsInline
-            >
-              <source
-                src={require("@site/static/videos/hero_light.mp4").default}
-                type="video/mp4"
-              />
             </video>
-
+            <video className={`${styles.video} hide-in-light`} autoPlay loop muted playsInline>
-            <video
+              <source src={require("@site/static/videos/hero_dark.mp4").default} type="video/mp4" />
-              className={`${styles.video} hide-in-light`}
-              autoPlay
-              loop
-              muted
-              playsInline
-            >
-              <source
-                src={require("@site/static/videos/hero_dark.mp4").default}
-                type="video/mp4"
-              />
             </video>
           </div>
 
@@ -200,28 +208,51 @@ export default function HomepageFeatures(): ReactNode {
             <Feature key={idx} {...props} />
           ))}
 
-          {/* inline styles in the interest of time */}
+          {/* YouTube Video Section */}
-          <div
+          <div style={{ width: "100%", textAlign: "center", padding: "2rem 0" }}>
-            style={{
+            <h2 style={{ fontSize: "3rem", marginBottom: "1rem", fontWeight: "bold" }}>
-              display: "flex",
+              Meet Codename Goose
-              flexDirection: "column",
+            </h2>
-              marginTop: "60px",
+            <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-            }}
+              <div
-          >
+                style={{
-            <h3
+                  position: "relative",
-              style={{
+                  width: "66vw",
-                textAlign: "center",
+                  height: "37.125vw",
-                marginBottom: "40px",
+                  maxWidth: "1100px",
-              }}
+                  borderRadius: "12px",
-            >
+                  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.25)",
-              Loved by engineers
+                  overflow: "hidden",
-            </h3>
+                }}
-            <div
+              >
-              style={{
+                <iframe
-                display: "flex",
+                  ref={videoRef}
-                flexWrap: "wrap",
+                  style={{
-              }}
+                    position: "absolute",
-            >
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    borderRadius: "12px",
+                  }}
+                  src={
+                    videoLoaded
+                      ? "https://www.youtube.com/embed/tZCNOe4TTkM?autoplay=1"
+                      : ""
+                  }
+                  title="Goose Introduction"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                ></iframe>
+              </div>
+            </div>
+          </div>
+
+          {/* Testimonials Section */}
+          <div style={{ display: "flex", flexDirection: "column", marginTop: "60px" }}>
+            <h3 style={{ textAlign: "center", marginBottom: "40px" }}>Loved by engineers</h3>
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
               {FeatureQuotes.map((props, idx) => (
                 <Quote key={idx} {...props} />
               ))}