aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-19 15:14:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

removing auto play from video (#1058)

Browse Source
This commit is contained in:
Ebony Louis
2025-02-03 19:30:36 -05:00
committed by GitHub
parent 7cb31a893a
commit a515d928ab
1 changed files with 5 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
documentation/src/components/HomepageFeatures/index.tsx
View File

@@ -1,5 +1,4 @@
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { useEffect, useRef, useState } from "react";
import clsx from "clsx"; import clsx from "clsx";
import Heading from "@theme/Heading"; import Heading from "@theme/Heading";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
@@ -165,32 +164,6 @@ function Quote({ name, github, role, testimonial }: FeatureQuote) {
} }
export default function HomepageFeatures(): ReactNode { 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 ( return (
<section className={styles.features}> <section className={styles.features}>
<div className="container"> <div className="container">
@@ -226,7 +199,6 @@ export default function HomepageFeatures(): ReactNode {
}} }}
> >
<iframe <iframe
ref={videoRef}
style={{ style={{
position: "absolute", position: "absolute",
top: 0, top: 0,
@@ -235,11 +207,7 @@ export default function HomepageFeatures(): ReactNode {
height: "100%", height: "100%",
borderRadius: "12px", borderRadius: "12px",
}} }}
src={ src="https://www.youtube.com/embed/tZCNOe4TTkM"
videoLoaded
? "https://www.youtube.com/embed/tZCNOe4TTkM?autoplay=1"
: ""
}
title="Goose Introduction" title="Goose Introduction"
frameBorder="0" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -248,7 +216,6 @@ export default function HomepageFeatures(): ReactNode {
</div> </div>
</div> </div>
</div> </div>
{/* Testimonials Section */} {/* Testimonials Section */}
<div style={{ display: "flex", flexDirection: "column", marginTop: "60px" }}> <div style={{ display: "flex", flexDirection: "column", marginTop: "60px" }}>
<h3 style={{ textAlign: "center", marginBottom: "40px" }}>Loved by engineers</h3> <h3 style={{ textAlign: "center", marginBottom: "40px" }}>Loved by engineers</h3>