Fallback to demo gif on mp4 load failure

apps/www/components/page/video-demo.test.tsx

@@ -213,4 +213,50 @@ describe("VideoDemo", () => {
 			"noopener,noreferrer",
 		);
 	});
+
+	it("falls back to demo.gif when video fails to load", () => {
+		render(<VideoDemo />);
+
+		const button = screen.getByRole("button");
+		const video = button.querySelector("video");
+
+		// Initially, video should be present
+		expect(video).toBeInTheDocument();
+
+		// Simulate video error
+		fireEvent.error(video!);
+
+		// After error, video should be replaced with img
+		expect(button.querySelector("video")).not.toBeInTheDocument();
+		const img = button.querySelector("img");
+		expect(img).toBeInTheDocument();
+		expect(img).toHaveAttribute("src", "/assets/demo.gif");
+		expect(img).toHaveAttribute("alt", "ArkEnv Demo");
+		expect(img).toHaveAttribute("width", "958");
+		expect(img).toHaveClass(
+			"block",
+			"max-h-[600px]",
+			"sm:max-h-[1000px]",
+			"object-contain",
+		);
+	});
+
+	it("maintains button click behavior after fallback to demo.gif", () => {
+		render(<VideoDemo />);
+
+		const button = screen.getByRole("button");
+		const video = button.querySelector("video");
+
+		// Simulate video error
+		fireEvent.error(video!);
+
+		// Button should still be clickable and open StackBlitz URL
+		fireEvent.click(button);
+
+		expect(mockWindowOpen).toHaveBeenCalledWith(
+			"https://stackblitz.com/github/yamcodes/arkenv/tree/main/examples/basic?file=index.ts",
+			"_blank",
+			"noopener,noreferrer",
+		);
+	});
 });

apps/www/components/page/video-demo.tsx

@@ -1,12 +1,20 @@
 "use client";
 
+import { useState } from "react";
+
 export function VideoDemo() {
+	const [videoError, setVideoError] = useState(false);
+
 	const handleVideoClick = () => {
 		const stackblitzUrl =
 			"https://stackblitz.com/github/yamcodes/arkenv/tree/main/examples/basic?file=index.ts";
 		window.open(stackblitzUrl, "_blank", "noopener,noreferrer");
 	};
 
+	const handleVideoError = () => {
+		setVideoError(true);
+	};
+
 	return (
 		<div className="inline-block relative mb-4">
 			{/* Main video container */}
@@ -16,21 +24,31 @@ export function VideoDemo() {
 				onClick={handleVideoClick}
 				aria-label="Open interactive demo in a new tab"
 			>
-				<video
-					autoPlay
-					loop
-					muted
-					playsInline
-					width={958}
-					poster="/assets/demo.png"
-					className="block max-h-[600px] sm:max-h-[1000px] object-contain"
-				>
-					<source
-						src="https://x9fkbqb4whr3w456.public.blob.vercel-storage.com/hero.mp4"
-						type="video/mp4"
+				{videoError ? (
+					<img
+						src="/assets/demo.gif"
+						alt="ArkEnv Demo"
+						width={958}
+						className="block max-h-[600px] sm:max-h-[1000px] object-contain"
 					/>
-					You need a browser that supports HTML5 video to view this video.
-				</video>
+				) : (
+					<video
+						autoPlay
+						loop
+						muted
+						playsInline
+						width={958}
+						poster="/assets/demo.png"
+						className="block max-h-[600px] sm:max-h-[1000px] object-contain"
+						onError={handleVideoError}
+					>
+						<source
+							src="https://x9fkbqb4whr3w456.public.blob.vercel-storage.com/hero.mp4"
+							type="video/mp4"
+						/>
+						You need a browser that supports HTML5 video to view this video.
+					</video>
+				)}
 			</button>
 		</div>
 	);