diff --git a/web/src/components/OutputRender.tsx b/web/src/components/OutputRender.tsx
index d88756c..d42046e 100644
--- a/web/src/components/OutputRender.tsx
+++ b/web/src/components/OutputRender.tsx
@@ -5,6 +5,20 @@ export async function OutputRender(props: {
   run_id: string;
   filename: string;
 }) {
+  if (props.filename.endsWith(".mp4") || props.filename.endsWith(".webm")) {
+    const url = await getFileDownloadUrl(
+      `outputs/runs/${props.run_id}/${props.filename}`,
+    );
+
+    return (
+      <video controls autoPlay className="w-[400px]">
+        <source src={url} type="video/mp4" />
+        <source src={url} type="video/webm" />
+        Your browser does not support the video tag.
+      </video>
+    );
+  }
+
   if (
     props.filename.endsWith(".png") ||
     props.filename.endsWith(".gif") ||
@@ -12,13 +26,13 @@ export async function OutputRender(props: {
     props.filename.endsWith(".jpeg")
   ) {
     const url = await getFileDownloadUrl(
-      `outputs/runs/${props.run_id}/${props.filename}`
+      `outputs/runs/${props.run_id}/${props.filename}`,
     );
 
     return <img className="max-w-[200px]" alt={props.filename} src={url} />;
   } else {
     const url = await getFileDownloadUrl(
-      `outputs/runs/${props.run_id}/${props.filename}`
+      `outputs/runs/${props.run_id}/${props.filename}`,
     );
     // console.log(url);