diff --git a/js/app/components/mobile/player.tsx b/js/app/components/mobile/player.tsx
index 7622679b8..e09f5022e 100644
--- a/js/app/components/mobile/player.tsx
+++ b/js/app/components/mobile/player.tsx
@@ -276,6 +276,7 @@ function PlayerWithProvider(
               <DesktopChatPanel
                 chatVisible={chatVisible}
                 chatPanelWidth={chatPanelWidth}
+                setShowChat={setShowChat}
               />
             ) : (
               !showUnavailable && <View />
diff --git a/js/app/src/linking-config.ts b/js/app/src/linking-config.ts
index 5b06561be..858e3c8d1 100644
--- a/js/app/src/linking-config.ts
+++ b/js/app/src/linking-config.ts
@@ -128,6 +128,7 @@ export const SCREEN_PATHS = {
   PopoutInfoWidget: "widgets/info",
   PopoutMultistream: "widgets/multistream",
   PopoutLivestream: "widgets/livestream",
+  VodPlayerDemo: "vod-player-demo",
 } as const;
 
 /**
@@ -232,6 +233,7 @@ export const streamplaceLinkingOptions: LinkingOptions<ReactNavigation.RootParam
         PopoutInfoWidget: SCREEN_PATHS.PopoutInfoWidget,
         PopoutMultistream: SCREEN_PATHS.PopoutMultistream,
         PopoutLivestream: SCREEN_PATHS.PopoutLivestream,
+        VodPlayerDemo: SCREEN_PATHS.VodPlayerDemo,
       },
     },
   };
diff --git a/js/app/src/navigation-helper.tsx b/js/app/src/navigation-helper.tsx
index e5a39bdc4..d53406866 100644
--- a/js/app/src/navigation-helper.tsx
+++ b/js/app/src/navigation-helper.tsx
@@ -36,6 +36,7 @@ export const ROOT_SCREENS = [
   "DanmuOBS",
   "AVSync",
   "LegacyStream",
+  "VodPlayerDemo",
 ];
 
 /**
diff --git a/js/app/src/navigation-types.ts b/js/app/src/navigation-types.ts
index 84d65115d..53a9e2287 100644
--- a/js/app/src/navigation-types.ts
+++ b/js/app/src/navigation-types.ts
@@ -54,6 +54,7 @@ export type RootStackParamList = {
   PopoutInfoWidget: undefined;
   PopoutMultistream: undefined;
   PopoutLivestream: undefined;
+  VodPlayerDemo: undefined;
 };
 
 // Helper type for screen props
diff --git a/js/app/src/screens/video.tsx b/js/app/src/screens/video.tsx
index 86d446810..bff14d446 100644
--- a/js/app/src/screens/video.tsx
+++ b/js/app/src/screens/video.tsx
@@ -1,4 +1,5 @@
 import { Text, useStreamplaceStore, View, zero } from "@streamplace/components";
+import { Platform } from "react-native";
 import { Player } from "../../components/mobile/player";
 
 const BBB_HLS_URL = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
@@ -10,12 +11,20 @@ function usePlaybackUrl(src?: string): string {
   return `${serverUrl}/api/playback/${src}/hls/index.m3u8`;
 }
 
+function useQuerySrc(routeSrc?: string): string | undefined {
+  if (Platform.OS === "web") {
+    const qUrl = new URLSearchParams(window.location.search).get("url");
+    if (qUrl) return qUrl;
+  }
+  return routeSrc;
+}
+
 export default function VideoScreen({
   route,
 }: {
   route?: { params?: { src?: string } };
 }) {
-  const src = route?.params?.src;
+  const src = useQuerySrc(route?.params?.src);
   const url = usePlaybackUrl(src);
 
   return (
diff --git a/js/app/src/shell.tsx b/js/app/src/shell.tsx
index de6beb4d0..82edb0144 100644
--- a/js/app/src/shell.tsx
+++ b/js/app/src/shell.tsx
@@ -66,6 +66,7 @@ import PopoutMultistream from "src/screens/popout-multistream";
 import PopoutStreamMonitor from "src/screens/popout-stream-monitor";
 import SupportScreen from "src/screens/support";
 import UploadScreen from "src/screens/upload";
+import VideoScreen from "src/screens/video";
 import { useStore } from "store";
 import {
   useHydrated,
@@ -584,6 +585,11 @@ export default function Shell() {
             component={MobileGoLive}
             options={{ headerShown: false }}
           />
+          <RootStack.Screen
+            name="VodPlayerDemo"
+            component={VideoScreen}
+            options={{ headerShown: false }}
+          />
 
           {/* Utility/embed screens */}
           <RootStack.Screen