diff --git a/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx b/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx
index 71d0e4405b..c51f348261 100644
--- a/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx
@@ -16,13 +16,14 @@ import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { Check, Globe2, Search } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { shareCap } from "@/actions/caps/share";
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
 import type { Spaces } from "@/app/(org)/dashboard/dashboard-data";
 import { SignedImageUrl } from "@/components/SignedImageUrl";
 import { Tooltip } from "@/components/Tooltip";
+import { usePublicEnv } from "@/utils/public-env";
 
 interface SharingDialogProps {
 	isOpen: boolean;
@@ -182,13 +183,9 @@ export const SharingDialog: React.FC<SharingDialogProps> = ({
 		});
 	};
 
-	const handleCopyEmbedCode = async () => {
-		const embedCode = `<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="${
-			process.env.NODE_ENV === "development"
-				? process.env.NEXT_PUBLIC_WEB_URL
-				: "https://cap.so"
-		}/embed/${capId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>`;
+	const embedCode = useEmbedCode(capId);
 
+	const handleCopyEmbedCode = async () => {
 		try {
 			await navigator.clipboard.writeText(embedCode);
 			toast.success("Embed code copied to clipboard");
@@ -325,11 +322,7 @@ export const SharingDialog: React.FC<SharingDialogProps> = ({
 						<div className="space-y-4">
 							<div className="p-3 rounded-lg border bg-gray-3 border-gray-4">
 								<code className="font-mono text-xs break-all text-gray-11">
-									{`<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="${
-										process.env.NODE_ENV === "development"
-											? process.env.NEXT_PUBLIC_WEB_URL
-											: "https://cap.so"
-									}/embed/${capId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>`}
+									{embedCode}
 								</code>
 							</div>
 							<Button
@@ -447,3 +440,28 @@ const SpaceCard = ({
 		</Tooltip>
 	);
 };
+
+function useEmbedCode(capId: Video.VideoId) {
+	const publicEnv = usePublicEnv();
+
+	return useMemo(
+		() =>
+			`
+	<div style="position: relative; padding-bottom: 56.25%; height: 0;">
+			<iframe
+			src="${publicEnv.webUrl}/embed/${capId}"
+			frameborder="0"
+			webkitallowfullscreen
+			mozallowfullscreen
+			allowfullscreen
+			style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+		></iframe>
+	</div>
+`
+				.trim()
+				.replace(/[\n\t]+/g, " ")
+				.replace(/>\s+</g, "><")
+				.replace(/"\s+>/g, '">'),
+		[publicEnv.webUrl, capId],
+	);
+}
diff --git a/apps/web/app/embed/[videoId]/page.tsx b/apps/web/app/embed/[videoId]/page.tsx
index a48cdbfe07..d37e62c94e 100644
--- a/apps/web/app/embed/[videoId]/page.tsx
+++ b/apps/web/app/embed/[videoId]/page.tsx
@@ -162,13 +162,7 @@ export default async function EmbedVideoPage(
 		return Option.fromNullable(video);
 	}).pipe(
 		Effect.flatten,
-		Effect.map(
-			(video) =>
-				({
-					needsPassword: false,
-					video,
-				}) as const,
-		),
+		Effect.map((video) => ({ needsPassword: false, video }) as const),
 		Effect.catchTag("VerifyVideoPasswordError", () =>
 			Effect.succeed({ needsPassword: true } as const),
 		),
@@ -191,7 +185,7 @@ export default async function EmbedVideoPage(
 						</p>
 					</div>,
 				),
-			NoSuchElementException: () => Effect.sync(notFound()),
+			NoSuchElementException: () => Effect.sync(() => notFound()),
 		}),
 		provideOptionalAuth,
 		EffectRuntime.runPromise,
diff --git a/apps/web/content/docs/self-hosting.mdx b/apps/web/content/docs/self-hosting.mdx
index 9ab72c4a86..8176e3b503 100644
--- a/apps/web/content/docs/self-hosting.mdx
+++ b/apps/web/content/docs/self-hosting.mdx
@@ -40,8 +40,6 @@ and [MinIO](https://min.io) for storing videos.
 
 Once deployed, login email links will be available in Railway’s Deploy Logs.
 
-<video src="https://cap.so/api/playlist/?videoId=6s8mpx2t4epkwrm" controls />
-
 ### Custom Deployment with Docker
 
 The [Cap Web Docker image](https://github.com/CapSoftware/Cap/pkgs/container/cap-web)
@@ -56,8 +54,6 @@ Copy the URL of your Cap Web deployment, and set the 'Cap Server URL'
 in Cap Desktop's settings page to this URL.
 Uploads from Cap Desktop will now be sent to your Cap Web deployment.
 
-<video src="https://cap.so/api/playlist/?videoId=sh5ch60pbs02eec" controls />
-
 ## Email Login Links
 
 If the `RESEND_API_KEY` and `RESEND_FROM_DOMAIN` environment variables are not set,
@@ -68,8 +64,6 @@ To send login links via email, you'll need to configure [Resend](https://resend.
 2. Connect a domain and set it as `RESEND_FROM_DOMAIN`
 3. Generate an API key and set it as `RESEND_API_KEY`
 
-<video src="https://cap.so/api/playlist/?videoId=xyz74j90rr4br3a" controls />
-
 ## Support
 
 If you encounter a problem with the Docker image or think this documentation is lacking,
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index ea5942df39..ff30a4bb70 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -41,6 +41,7 @@ export async function middleware(request: NextRequest) {
 		if (
 			!(
 				path.startsWith("/s/") ||
+				path.startsWith("/middleware") ||
 				path.startsWith("/dashboard") ||
 				path.startsWith("/onboarding") ||
 				path.startsWith("/api") ||