From 362d3f0fdf28ee25509c211ea975f57263829360 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Sat, 26 Sep 2026 17:07:28 -0700
Subject: [PATCH] fix login video on desktop

---
 .../login-modal/src/lib/login-modal.tsx       | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/frontend/libs/components/login-modal/src/lib/login-modal.tsx b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
index 9f2628c8c0..d578afe9aa 100644
--- a/frontend/libs/components/login-modal/src/lib/login-modal.tsx
+++ b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
@@ -12,7 +12,7 @@ import { useLoginModalStore } from "./useLoginModalStore";
 
 // Webapp auth-showcase video (swap by passing `videoUrl`).
 const DEFAULT_SHOWCASE_VIDEO =
-  "https://player.vimeo.com/video/1169289718?background=1&autoplay=1&loop=1&muted=1";
+  "https://frontend-cdn.fakeyou.com/videos/knight-video.mp4";
 const LOGIN_SUCCESS_DURATION_MS = 3000;
 
 interface LoginModalProps {
@@ -20,7 +20,7 @@ interface LoginModalProps {
   onOpenChange?: (isOpen: boolean) => void;
   onArtCraftAuthSuccess?: (userInfo: any) => void;
   isSignUp?: boolean;
-  /** Optional override for the right-pane showcase video. */
+  /** Optional direct media URL for the right-pane showcase video. */
   videoUrl?: string;
   // Accepted for backwards compatibility with existing call sites (MainApp
   // passes these); no longer used now that the showcase is a single video.
@@ -283,24 +283,19 @@ export function LoginModal({
   );
 }
 
-// Right-pane video showcase — Vimeo background embed scaled to cover the pane,
+// Right-pane video showcase — muted background video cropped to cover the pane,
 // with a legibility gradient + caption. Mirrors the webapp auth-showcase.
 function LoginShowcase({ videoUrl }: { videoUrl: string }) {
   return (
-    <div
-      className="absolute inset-2 overflow-hidden rounded-2xl bg-black"
-      style={{ containerType: "size" }}
-    >
-      <iframe
+    <div className="absolute inset-2 overflow-hidden rounded-2xl bg-black">
+      <video
         src={videoUrl}
-        title="ArtCraft"
-        allow="autoplay; fullscreen; picture-in-picture"
-        allowFullScreen
-        className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-        style={{
-          width: "max(100cqw, calc(100cqh * 16 / 9))",
-          height: "max(100cqh, calc(100cqw * 9 / 16))",
-        }}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="auto"
+        className="pointer-events-none absolute inset-0 h-full w-full object-cover"
       />
 
       <div