diff --git a/apps/web/components/LocalVideo.tsx b/apps/web/components/LocalVideo.tsx
new file mode 100644
index 0000000..d1064ad
--- /dev/null
+++ b/apps/web/components/LocalVideo.tsx
@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+interface LocalVideoProps extends React.ComponentPropsWithoutRef<"video"> {
+  path: string;
+}
+
+export default function LocalVideo({ path, ...props }: LocalVideoProps) {
+  const src = useMemo(() => `/api/files?path=${encodeURIComponent(path)}`, [path]);
+
+  return <video src={src} {...props} />;
+}
diff --git a/apps/web/src/app/_components/FilePreview.tsx b/apps/web/src/app/_components/FilePreview.tsx
index e600037..b5bc289 100644
--- a/apps/web/src/app/_components/FilePreview.tsx
+++ b/apps/web/src/app/_components/FilePreview.tsx
@@ -1,5 +1,6 @@
 import useLookupFile from "../../../hooks/useLookupFile";
 import { LocalImage } from "../../../components/LocalImage";
+import LocalVideo from "../../../components/LocalVideo";
 
 interface FilePreviewProps {
   path: string;
@@ -45,11 +46,7 @@ export function FilePreview({ path }: FilePreviewProps) {
   }
 
   if (data.startsWith("video")) {
-    return (
-      <div className="text-yellow-500 bg-yellow-100 rounded-xl border border-yellow-300 border-dashed p-2 w-full">
-        {data}
-      </div>
-    );
+    return <LocalVideo path={path} controls className="rounded-xl max-h-48" />;
   }
 
   return (
diff --git a/demo/loop.mp4 b/demo/loop.mp4
new file mode 100644
index 0000000..8597b13
Binary files /dev/null and b/demo/loop.mp4 differ
diff --git a/demo/sub/loop.mp4 b/demo/sub/loop.mp4
new file mode 100644
index 0000000..8597b13
Binary files /dev/null and b/demo/sub/loop.mp4 differ