From 3bee63e2b54410dfe0262d38d9d29d41c106d3d6 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Mon, 11 May 2026 10:47:27 -0400
Subject: [PATCH 01/23] add video embed page and route group restructure

---
 .../VideoEmbedPage/VideoEmbedPage.test.tsx    | 115 ++++++++++++++++++
 .../VideoEmbedPage/VideoEmbedPage.tsx         |  99 +++++++++++++++
 frontends/main/src/app/(embed)/layout.tsx     |  15 +++
 .../src/app/(embed)/video/[id]/embed/page.tsx |  50 ++++++++
 .../(products)/courses/[readable_id]/page.tsx |   0
 .../courses/p/[readable_id]/page.tsx          |   0
 .../programs/[readable_id]/page.tsx           |   0
 .../main/src/app/{ => (site)}/about/page.tsx  |   0
 .../c/[channelType]/[name]/page.tsx           |   0
 .../main/src/app/{ => (site)}/cart/page.tsx   |   0
 .../[certificateType]/[uuid]/page.tsx         |   0
 .../[uuid]/pdf/route.test.tsx                 |   0
 .../[certificateType]/[uuid]/pdf/route.tsx    |   0
 .../[certificateType]/[uuid]/pdf/utils.ts     |   0
 .../src/app/{ => (site)}/dashboard/layout.tsx |   0
 .../dashboard/my-lists/[id]/page.tsx          |   0
 .../{ => (site)}/dashboard/my-lists/page.tsx  |   0
 .../contract/[contractSlug]/page.tsx          |   0
 .../organization/[orgSlug]/page.test.tsx      |   0
 .../dashboard/organization/[orgSlug]/page.tsx |   0
 .../dashboard/organization/page.tsx           |   0
 .../src/app/{ => (site)}/dashboard/page.tsx   |   0
 .../{ => (site)}/dashboard/profile/page.tsx   |   0
 .../dashboard/program/[id]/page.tsx           |   0
 .../{ => (site)}/dashboard/settings/page.tsx  |   0
 .../src/app/{ => (site)}/departments/page.tsx |   0
 .../enrollmentcode/[code]/page.tsx            |   0
 .../main/src/app/{ => (site)}/error.test.tsx  |   0
 frontends/main/src/app/{ => (site)}/error.tsx |   0
 .../src/app/{ => (site)}/honor_code/page.tsx  |   0
 frontends/main/src/app/(site)/layout.tsx      |  22 ++++
 .../{ => (site)}/learningpaths/[id]/page.tsx  |   0
 .../app/{ => (site)}/learningpaths/page.tsx   |   0
 .../news/[slugOrId]/draft/page.tsx            |   0
 .../news/[slugOrId]/edit/page.tsx             |   0
 .../app/{ => (site)}/news/[slugOrId]/page.tsx |   0
 .../src/app/{ => (site)}/news/draft/page.tsx  |   0
 .../src/app/{ => (site)}/news/new/page.tsx    |   0
 .../main/src/app/{ => (site)}/news/page.tsx   |   0
 .../main/src/app/{ => (site)}/not-found.tsx   |   0
 .../src/app/{ => (site)}/onboarding/page.tsx  |   0
 frontends/main/src/app/{ => (site)}/page.tsx  |   0
 .../{ => (site)}/podcast/[podcastId]/page.tsx |   0
 .../podcast_episode/[episodeId]/page.tsx      |   0
 .../src/app/{ => (site)}/privacy/page.tsx     |   0
 .../program_letter/[id]/view/page.tsx         |   0
 .../main/src/app/{ => (site)}/search/page.tsx |   0
 .../main/src/app/{ => (site)}/terms/page.tsx  |   0
 .../main/src/app/{ => (site)}/topics/page.tsx |   0
 .../main/src/app/{ => (site)}/units/page.tsx  |   0
 .../universal-learning/ai/page.tsx            |   0
 .../{ => (site)}/video-playlist/[id]/page.tsx |   0
 .../video-playlist/detail/[id]/page.tsx       |  94 ++++++++++++++
 frontends/main/src/app/layout.tsx             |  13 +-
 54 files changed, 396 insertions(+), 12 deletions(-)
 create mode 100644 frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
 create mode 100644 frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
 create mode 100644 frontends/main/src/app/(embed)/layout.tsx
 create mode 100644 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
 rename frontends/main/src/app/{ => (site)}/(products)/courses/[readable_id]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/(products)/courses/p/[readable_id]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/(products)/programs/[readable_id]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/about/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/c/[channelType]/[name]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/cart/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/certificate/[certificateType]/[uuid]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/certificate/[certificateType]/[uuid]/pdf/route.test.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/certificate/[certificateType]/[uuid]/pdf/route.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/certificate/[certificateType]/[uuid]/pdf/utils.ts (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/layout.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/my-lists/[id]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/my-lists/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/organization/[orgSlug]/contract/[contractSlug]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/organization/[orgSlug]/page.test.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/organization/[orgSlug]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/organization/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/profile/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/program/[id]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/dashboard/settings/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/departments/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/enrollmentcode/[code]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/error.test.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/error.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/honor_code/page.tsx (100%)
 create mode 100644 frontends/main/src/app/(site)/layout.tsx
 rename frontends/main/src/app/{ => (site)}/learningpaths/[id]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/learningpaths/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/news/[slugOrId]/draft/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/news/[slugOrId]/edit/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/news/[slugOrId]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/news/draft/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/news/new/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/news/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/not-found.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/onboarding/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/podcast/[podcastId]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/podcast/[podcastId]/podcast_episode/[episodeId]/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/privacy/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/program_letter/[id]/view/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/search/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/terms/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/topics/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/units/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/universal-learning/ai/page.tsx (100%)
 rename frontends/main/src/app/{ => (site)}/video-playlist/[id]/page.tsx (100%)
 create mode 100644 frontends/main/src/app/(site)/video-playlist/detail/[id]/page.tsx

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
new file mode 100644
index 0000000000..b67afab300
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
@@ -0,0 +1,115 @@
+import React from "react"
+import { setMockResponse, urls, factories } from "api/test-utils"
+import { renderWithProviders, screen } from "@/test-utils"
+import { notFound } from "next/navigation"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import VideoEmbedPage from "./VideoEmbedPage"
+import type { VideoResource } from "api/v1"
+import { ResourceTypeEnum } from "api/v1"
+
+jest.mock("posthog-js/react")
+const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+
+jest.mock("@/common/useFeatureFlagsLoaded")
+const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
+
+jest.mock("next-nprogress-bar", () => ({
+  useRouter: () => ({}),
+}))
+
+jest.mock("next/navigation", () => ({
+  ...jest.requireActual("next/navigation"),
+  notFound: jest.fn(),
+}))
+
+jest.mock("@/app-pages/VideoPlaylistCollectionPage/VideoJsPlayer", () => ({
+  __esModule: true,
+  default: (props: { sources?: { src: string; type: string }[] }) => (
+    <div
+      data-testid="video-js-player"
+      data-sources={JSON.stringify(props.sources ?? [])}
+    />
+  ),
+}))
+
+const makeVideo = (overrides: Partial<VideoResource> = {}): VideoResource =>
+  factories.learningResources.video({
+    resource_type: ResourceTypeEnum.Video,
+    video: {
+      id: 1,
+      streaming_url: "https://example.com/video.m3u8",
+      duration: "PT10M",
+      caption_urls: [],
+      cover_image_url: null,
+    },
+    ...overrides,
+  }) as VideoResource
+
+const setupVideoApi = (video: VideoResource) => {
+  setMockResponse.get(urls.learningResources.details({ id: video.id }), video)
+}
+
+describe("VideoEmbedPage", () => {
+  beforeEach(() => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
+  })
+
+  test("renders VideoJsPlayer for a video with a streaming URL", async () => {
+    const video = makeVideo()
+    setupVideoApi(video)
+
+    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+
+    const player = await screen.findByTestId("video-js-player")
+    expect(player).toBeInTheDocument()
+
+    const sources = JSON.parse(player.getAttribute("data-sources") ?? "[]")
+    expect(sources[0].type).toBe("application/x-mpegURL")
+  })
+
+  test("renders VideoJsPlayer with mp4 source type", async () => {
+    const video = makeVideo({
+      video: {
+        id: 2,
+        streaming_url: "https://example.com/video.mp4",
+        duration: "PT5M",
+        caption_urls: [],
+        cover_image_url: null,
+      },
+    })
+    setupVideoApi(video)
+
+    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+
+    const player = await screen.findByTestId("video-js-player")
+    const sources = JSON.parse(player.getAttribute("data-sources") ?? "[]")
+    expect(sources[0].type).toBe("video/mp4")
+  })
+
+  test("calls notFound when feature flag is off and flags are loaded", async () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(false)
+    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
+
+    const video = makeVideo()
+    setupVideoApi(video)
+
+    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+
+    await screen.findByTestId("video-js-player").catch(() => null)
+    expect(notFound).toHaveBeenCalled()
+  })
+
+  test("does not call notFound while feature flags are still loading", () => {
+    mockedUseFeatureFlagEnabled.mockReturnValue(false)
+    mockedUseFeatureFlagsLoaded.mockReturnValue(false)
+
+    const video = makeVideo()
+    setupVideoApi(video)
+
+    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+
+    expect(notFound).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
new file mode 100644
index 0000000000..246e3f504b
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import React, { useMemo } from "react"
+import dynamic from "next/dynamic"
+import { styled } from "ol-components"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { notFound } from "next/navigation"
+import { useLearningResourcesDetail } from "api/hooks/learningResources"
+import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/videoSources"
+import { FeatureFlags } from "@/common/feature_flags"
+import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import type { VideoJsPlayerProps } from "@/app-pages/VideoPlaylistCollectionPage/VideoJsPlayer"
+import type { VideoResource } from "api/v1"
+
+const VideoJsPlayer = dynamic<VideoJsPlayerProps>(
+  () => import("@/app-pages/VideoPlaylistCollectionPage/VideoJsPlayer"),
+  { ssr: false },
+)
+
+const EmbedContainer = styled.div({
+  position: "relative",
+  width: "100vw",
+  height: "100vh",
+  maxHeight: "100vh",
+  backgroundColor: "#000",
+  overflow: "hidden",
+  ".video-js, .vjs-tech": {
+    width: "100% !important",
+    height: "100% !important",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+  ".vjs-big-play-button": {
+    width: "92px !important",
+    height: "92px !important",
+    lineHeight: "92px !important",
+    borderRadius: "50% !important",
+    backgroundColor: "#d8daddb3 !important",
+    border: "none !important",
+    fontSize: "4em !important",
+    marginTop: "-1.25em !important",
+    marginLeft: "-1.18em !important",
+  },
+})
+
+type VideoEmbedPageProps = {
+  videoId: number
+}
+
+const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => {
+  const showVideoPlaylistPage = useFeatureFlagEnabled(
+    FeatureFlags.VideoPlaylistPage,
+  )
+  const flagsLoaded = useFeatureFlagsLoaded()
+
+  const { data: resource } = useLearningResourcesDetail(videoId)
+  const video = resource as VideoResource | undefined
+
+  const sources = useMemo(
+    () =>
+      video
+        ? resolveVideoSources(
+            video.video?.streaming_url,
+            video.url,
+            video.content_files?.[0]?.youtube_id,
+          )
+        : [],
+    [video],
+  )
+
+  if (!showVideoPlaylistPage && flagsLoaded) {
+    notFound()
+  }
+
+  if (!showVideoPlaylistPage) {
+    return null
+  }
+
+  return (
+    <EmbedContainer>
+      {sources.length > 0 && (
+        <VideoJsPlayer
+          key={videoId}
+          sources={sources}
+          tracks={video?.video?.caption_urls ?? []}
+          poster={
+            video?.video?.cover_image_url ?? video?.image?.url ?? undefined
+          }
+          autoplay={false}
+          controls
+          fluid={false}
+        />
+      )}
+    </EmbedContainer>
+  )
+}
+
+export default VideoEmbedPage
diff --git a/frontends/main/src/app/(embed)/layout.tsx b/frontends/main/src/app/(embed)/layout.tsx
new file mode 100644
index 0000000000..27cfa9f248
--- /dev/null
+++ b/frontends/main/src/app/(embed)/layout.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import { MITLearnGlobalStyles } from "ol-components"
+
+export default function EmbedLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <MITLearnGlobalStyles />
+      {children}
+    </>
+  )
+}
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
new file mode 100644
index 0000000000..3f449f9dbf
--- /dev/null
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
+import { learningResourceQueries } from "api/hooks/learningResources"
+import { getQueryClient } from "@/app/getQueryClient"
+import { notFound } from "next/navigation"
+import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/videoSources"
+import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
+import { VideoResourceResourceTypeEnum } from "api/v1"
+import type { VideoResource } from "api/v1"
+
+const Page = async ({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) => {
+  const { id } = await params
+  const videoId = Number(id)
+  if (!Number.isInteger(videoId) || videoId <= 0) {
+    notFound()
+  }
+
+  const queryClient = getQueryClient()
+  const resource = await queryClient.fetchQueryOr404(
+    learningResourceQueries.detail(videoId),
+  )
+
+  if (resource.resource_type !== VideoResourceResourceTypeEnum.Video) {
+    notFound()
+  }
+
+  const videoResource = resource as VideoResource
+  const sources = resolveVideoSources(
+    videoResource.video?.streaming_url,
+    videoResource.url,
+    videoResource.content_files?.[0]?.youtube_id,
+  )
+
+  const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4"]
+  if (sources.length === 0 || !SUPPORTED_TYPES.includes(sources[0].type)) {
+    notFound()
+  }
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <VideoEmbedPage videoId={videoId} />
+    </HydrationBoundary>
+  )
+}
+
+export default Page
diff --git a/frontends/main/src/app/(products)/courses/[readable_id]/page.tsx b/frontends/main/src/app/(site)/(products)/courses/[readable_id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/(products)/courses/[readable_id]/page.tsx
rename to frontends/main/src/app/(site)/(products)/courses/[readable_id]/page.tsx
diff --git a/frontends/main/src/app/(products)/courses/p/[readable_id]/page.tsx b/frontends/main/src/app/(site)/(products)/courses/p/[readable_id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/(products)/courses/p/[readable_id]/page.tsx
rename to frontends/main/src/app/(site)/(products)/courses/p/[readable_id]/page.tsx
diff --git a/frontends/main/src/app/(products)/programs/[readable_id]/page.tsx b/frontends/main/src/app/(site)/(products)/programs/[readable_id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/(products)/programs/[readable_id]/page.tsx
rename to frontends/main/src/app/(site)/(products)/programs/[readable_id]/page.tsx
diff --git a/frontends/main/src/app/about/page.tsx b/frontends/main/src/app/(site)/about/page.tsx
similarity index 100%
rename from frontends/main/src/app/about/page.tsx
rename to frontends/main/src/app/(site)/about/page.tsx
diff --git a/frontends/main/src/app/c/[channelType]/[name]/page.tsx b/frontends/main/src/app/(site)/c/[channelType]/[name]/page.tsx
similarity index 100%
rename from frontends/main/src/app/c/[channelType]/[name]/page.tsx
rename to frontends/main/src/app/(site)/c/[channelType]/[name]/page.tsx
diff --git a/frontends/main/src/app/cart/page.tsx b/frontends/main/src/app/(site)/cart/page.tsx
similarity index 100%
rename from frontends/main/src/app/cart/page.tsx
rename to frontends/main/src/app/(site)/cart/page.tsx
diff --git a/frontends/main/src/app/certificate/[certificateType]/[uuid]/page.tsx b/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/page.tsx
similarity index 100%
rename from frontends/main/src/app/certificate/[certificateType]/[uuid]/page.tsx
rename to frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/page.tsx
diff --git a/frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.test.tsx b/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.test.tsx
similarity index 100%
rename from frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.test.tsx
rename to frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.test.tsx
diff --git a/frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.tsx b/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.tsx
similarity index 100%
rename from frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/route.tsx
rename to frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/route.tsx
diff --git a/frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/utils.ts b/frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/utils.ts
similarity index 100%
rename from frontends/main/src/app/certificate/[certificateType]/[uuid]/pdf/utils.ts
rename to frontends/main/src/app/(site)/certificate/[certificateType]/[uuid]/pdf/utils.ts
diff --git a/frontends/main/src/app/dashboard/layout.tsx b/frontends/main/src/app/(site)/dashboard/layout.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/layout.tsx
rename to frontends/main/src/app/(site)/dashboard/layout.tsx
diff --git a/frontends/main/src/app/dashboard/my-lists/[id]/page.tsx b/frontends/main/src/app/(site)/dashboard/my-lists/[id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/my-lists/[id]/page.tsx
rename to frontends/main/src/app/(site)/dashboard/my-lists/[id]/page.tsx
diff --git a/frontends/main/src/app/dashboard/my-lists/page.tsx b/frontends/main/src/app/(site)/dashboard/my-lists/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/my-lists/page.tsx
rename to frontends/main/src/app/(site)/dashboard/my-lists/page.tsx
diff --git a/frontends/main/src/app/dashboard/organization/[orgSlug]/contract/[contractSlug]/page.tsx b/frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/contract/[contractSlug]/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/organization/[orgSlug]/contract/[contractSlug]/page.tsx
rename to frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/contract/[contractSlug]/page.tsx
diff --git a/frontends/main/src/app/dashboard/organization/[orgSlug]/page.test.tsx b/frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/page.test.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/organization/[orgSlug]/page.test.tsx
rename to frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/page.test.tsx
diff --git a/frontends/main/src/app/dashboard/organization/[orgSlug]/page.tsx b/frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/organization/[orgSlug]/page.tsx
rename to frontends/main/src/app/(site)/dashboard/organization/[orgSlug]/page.tsx
diff --git a/frontends/main/src/app/dashboard/organization/page.tsx b/frontends/main/src/app/(site)/dashboard/organization/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/organization/page.tsx
rename to frontends/main/src/app/(site)/dashboard/organization/page.tsx
diff --git a/frontends/main/src/app/dashboard/page.tsx b/frontends/main/src/app/(site)/dashboard/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/page.tsx
rename to frontends/main/src/app/(site)/dashboard/page.tsx
diff --git a/frontends/main/src/app/dashboard/profile/page.tsx b/frontends/main/src/app/(site)/dashboard/profile/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/profile/page.tsx
rename to frontends/main/src/app/(site)/dashboard/profile/page.tsx
diff --git a/frontends/main/src/app/dashboard/program/[id]/page.tsx b/frontends/main/src/app/(site)/dashboard/program/[id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/program/[id]/page.tsx
rename to frontends/main/src/app/(site)/dashboard/program/[id]/page.tsx
diff --git a/frontends/main/src/app/dashboard/settings/page.tsx b/frontends/main/src/app/(site)/dashboard/settings/page.tsx
similarity index 100%
rename from frontends/main/src/app/dashboard/settings/page.tsx
rename to frontends/main/src/app/(site)/dashboard/settings/page.tsx
diff --git a/frontends/main/src/app/departments/page.tsx b/frontends/main/src/app/(site)/departments/page.tsx
similarity index 100%
rename from frontends/main/src/app/departments/page.tsx
rename to frontends/main/src/app/(site)/departments/page.tsx
diff --git a/frontends/main/src/app/enrollmentcode/[code]/page.tsx b/frontends/main/src/app/(site)/enrollmentcode/[code]/page.tsx
similarity index 100%
rename from frontends/main/src/app/enrollmentcode/[code]/page.tsx
rename to frontends/main/src/app/(site)/enrollmentcode/[code]/page.tsx
diff --git a/frontends/main/src/app/error.test.tsx b/frontends/main/src/app/(site)/error.test.tsx
similarity index 100%
rename from frontends/main/src/app/error.test.tsx
rename to frontends/main/src/app/(site)/error.test.tsx
diff --git a/frontends/main/src/app/error.tsx b/frontends/main/src/app/(site)/error.tsx
similarity index 100%
rename from frontends/main/src/app/error.tsx
rename to frontends/main/src/app/(site)/error.tsx
diff --git a/frontends/main/src/app/honor_code/page.tsx b/frontends/main/src/app/(site)/honor_code/page.tsx
similarity index 100%
rename from frontends/main/src/app/honor_code/page.tsx
rename to frontends/main/src/app/(site)/honor_code/page.tsx
diff --git a/frontends/main/src/app/(site)/layout.tsx b/frontends/main/src/app/(site)/layout.tsx
new file mode 100644
index 0000000000..3d11cbf5ea
--- /dev/null
+++ b/frontends/main/src/app/(site)/layout.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import Header from "@/page-components/Header/Header"
+import Footer from "@/page-components/Footer/Footer"
+import { PageWrapper, PageWrapperInner } from "@/app/styled"
+import { MITLearnGlobalStyles } from "ol-components"
+
+export default function SiteLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <MITLearnGlobalStyles />
+      <PageWrapper>
+        <Header />
+        <PageWrapperInner>{children}</PageWrapperInner>
+        <Footer />
+      </PageWrapper>
+    </>
+  )
+}
diff --git a/frontends/main/src/app/learningpaths/[id]/page.tsx b/frontends/main/src/app/(site)/learningpaths/[id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/learningpaths/[id]/page.tsx
rename to frontends/main/src/app/(site)/learningpaths/[id]/page.tsx
diff --git a/frontends/main/src/app/learningpaths/page.tsx b/frontends/main/src/app/(site)/learningpaths/page.tsx
similarity index 100%
rename from frontends/main/src/app/learningpaths/page.tsx
rename to frontends/main/src/app/(site)/learningpaths/page.tsx
diff --git a/frontends/main/src/app/news/[slugOrId]/draft/page.tsx b/frontends/main/src/app/(site)/news/[slugOrId]/draft/page.tsx
similarity index 100%
rename from frontends/main/src/app/news/[slugOrId]/draft/page.tsx
rename to frontends/main/src/app/(site)/news/[slugOrId]/draft/page.tsx
diff --git a/frontends/main/src/app/news/[slugOrId]/edit/page.tsx b/frontends/main/src/app/(site)/news/[slugOrId]/edit/page.tsx
similarity index 100%
rename from frontends/main/src/app/news/[slugOrId]/edit/page.tsx
rename to frontends/main/src/app/(site)/news/[slugOrId]/edit/page.tsx
diff --git a/frontends/main/src/app/news/[slugOrId]/page.tsx b/frontends/main/src/app/(site)/news/[slugOrId]/page.tsx
similarity index 100%
rename from frontends/main/src/app/news/[slugOrId]/page.tsx
rename to frontends/main/src/app/(site)/news/[slugOrId]/page.tsx
diff --git a/frontends/main/src/app/news/draft/page.tsx b/frontends/main/src/app/(site)/news/draft/page.tsx
similarity index 100%
rename from frontends/main/src/app/news/draft/page.tsx
rename to frontends/main/src/app/(site)/news/draft/page.tsx
diff --git a/frontends/main/src/app/news/new/page.tsx b/frontends/main/src/app/(site)/news/new/page.tsx
similarity index 100%
rename from frontends/main/src/app/news/new/page.tsx
rename to frontends/main/src/app/(site)/news/new/page.tsx
diff --git a/frontends/main/src/app/news/page.tsx b/frontends/main/src/app/(site)/news/page.tsx
similarity index 100%
rename from frontends/main/src/app/news/page.tsx
rename to frontends/main/src/app/(site)/news/page.tsx
diff --git a/frontends/main/src/app/not-found.tsx b/frontends/main/src/app/(site)/not-found.tsx
similarity index 100%
rename from frontends/main/src/app/not-found.tsx
rename to frontends/main/src/app/(site)/not-found.tsx
diff --git a/frontends/main/src/app/onboarding/page.tsx b/frontends/main/src/app/(site)/onboarding/page.tsx
similarity index 100%
rename from frontends/main/src/app/onboarding/page.tsx
rename to frontends/main/src/app/(site)/onboarding/page.tsx
diff --git a/frontends/main/src/app/page.tsx b/frontends/main/src/app/(site)/page.tsx
similarity index 100%
rename from frontends/main/src/app/page.tsx
rename to frontends/main/src/app/(site)/page.tsx
diff --git a/frontends/main/src/app/podcast/[podcastId]/page.tsx b/frontends/main/src/app/(site)/podcast/[podcastId]/page.tsx
similarity index 100%
rename from frontends/main/src/app/podcast/[podcastId]/page.tsx
rename to frontends/main/src/app/(site)/podcast/[podcastId]/page.tsx
diff --git a/frontends/main/src/app/podcast/[podcastId]/podcast_episode/[episodeId]/page.tsx b/frontends/main/src/app/(site)/podcast/[podcastId]/podcast_episode/[episodeId]/page.tsx
similarity index 100%
rename from frontends/main/src/app/podcast/[podcastId]/podcast_episode/[episodeId]/page.tsx
rename to frontends/main/src/app/(site)/podcast/[podcastId]/podcast_episode/[episodeId]/page.tsx
diff --git a/frontends/main/src/app/privacy/page.tsx b/frontends/main/src/app/(site)/privacy/page.tsx
similarity index 100%
rename from frontends/main/src/app/privacy/page.tsx
rename to frontends/main/src/app/(site)/privacy/page.tsx
diff --git a/frontends/main/src/app/program_letter/[id]/view/page.tsx b/frontends/main/src/app/(site)/program_letter/[id]/view/page.tsx
similarity index 100%
rename from frontends/main/src/app/program_letter/[id]/view/page.tsx
rename to frontends/main/src/app/(site)/program_letter/[id]/view/page.tsx
diff --git a/frontends/main/src/app/search/page.tsx b/frontends/main/src/app/(site)/search/page.tsx
similarity index 100%
rename from frontends/main/src/app/search/page.tsx
rename to frontends/main/src/app/(site)/search/page.tsx
diff --git a/frontends/main/src/app/terms/page.tsx b/frontends/main/src/app/(site)/terms/page.tsx
similarity index 100%
rename from frontends/main/src/app/terms/page.tsx
rename to frontends/main/src/app/(site)/terms/page.tsx
diff --git a/frontends/main/src/app/topics/page.tsx b/frontends/main/src/app/(site)/topics/page.tsx
similarity index 100%
rename from frontends/main/src/app/topics/page.tsx
rename to frontends/main/src/app/(site)/topics/page.tsx
diff --git a/frontends/main/src/app/units/page.tsx b/frontends/main/src/app/(site)/units/page.tsx
similarity index 100%
rename from frontends/main/src/app/units/page.tsx
rename to frontends/main/src/app/(site)/units/page.tsx
diff --git a/frontends/main/src/app/universal-learning/ai/page.tsx b/frontends/main/src/app/(site)/universal-learning/ai/page.tsx
similarity index 100%
rename from frontends/main/src/app/universal-learning/ai/page.tsx
rename to frontends/main/src/app/(site)/universal-learning/ai/page.tsx
diff --git a/frontends/main/src/app/video-playlist/[id]/page.tsx b/frontends/main/src/app/(site)/video-playlist/[id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/video-playlist/[id]/page.tsx
rename to frontends/main/src/app/(site)/video-playlist/[id]/page.tsx
diff --git a/frontends/main/src/app/(site)/video-playlist/detail/[id]/page.tsx b/frontends/main/src/app/(site)/video-playlist/detail/[id]/page.tsx
new file mode 100644
index 0000000000..0d0a7b2ac7
--- /dev/null
+++ b/frontends/main/src/app/(site)/video-playlist/detail/[id]/page.tsx
@@ -0,0 +1,94 @@
+import React from "react"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
+import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
+import {
+  learningResourceQueries,
+  videoPlaylistQueries,
+} from "api/hooks/learningResources"
+import { getQueryClient } from "@/app/getQueryClient"
+import VideoDetailPageRouter from "@/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter"
+import { notFound } from "next/navigation"
+import type { VideoResource } from "api/v1"
+
+export const generateMetadata = async (props: PageProps<"/video/[id]">) => {
+  const { id } = await props.params
+  const videoId = Number(id)
+  if (!Number.isInteger(videoId) || videoId <= 0) {
+    notFound()
+  }
+  const queryClient = getQueryClient()
+
+  return safeGenerateMetadata(async () => {
+    const resource = await queryClient.fetchQuery(
+      learningResourceQueries.detail(videoId),
+    )
+    return standardizeMetadata({
+      title: resource.title,
+      description: resource.description ?? undefined,
+      image: resource.image?.url,
+      imageAlt: resource.image?.alt ?? undefined,
+    })
+  })
+}
+
+const Page: React.FC<PageProps<"/video/[id]">> = async ({
+  params,
+  searchParams,
+}) => {
+  const { id } = await params
+  const resolvedSearchParams = await searchParams
+  const videoId = Number(id)
+  if (!Number.isInteger(videoId) || videoId <= 0) {
+    notFound()
+  }
+
+  const queryClient = getQueryClient()
+
+  const video = (await queryClient.fetchQueryOr404(
+    learningResourceQueries.detail(videoId),
+  )) as VideoResource
+
+  // Resolve playlistId: prefer explicit ?playlist= param, fall back to video.playlists[0]
+  let playlistId: number | null = null
+  const rawPlaylist = resolvedSearchParams?.playlist
+
+  if (rawPlaylist !== undefined) {
+    // searchParams values can be string | string[]; treat array as invalid
+    if (Array.isArray(rawPlaylist)) {
+      notFound()
+    }
+    const parsed = Number(rawPlaylist)
+    if (!Number.isInteger(parsed) || parsed <= 0) {
+      notFound()
+    }
+    playlistId = parsed
+  } else {
+    // Use the first playlist the video belongs to, if any
+    const firstPlaylist = video.playlists?.[0]
+    if (firstPlaylist !== undefined) {
+      const parsed = Number(firstPlaylist)
+      if (Number.isInteger(parsed) && parsed > 0) {
+        playlistId = parsed
+      }
+    }
+  }
+
+  if (playlistId !== null) {
+    await Promise.all([
+      queryClient.fetchQueryOr404(videoPlaylistQueries.detail(playlistId)),
+      queryClient.prefetchQuery(
+        learningResourceQueries.items(playlistId, {
+          learning_resource_id: playlistId,
+        }),
+      ),
+    ])
+  }
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <VideoDetailPageRouter videoId={videoId} playlistId={playlistId} />
+    </HydrationBoundary>
+  )
+}
+
+export default Page
diff --git a/frontends/main/src/app/layout.tsx b/frontends/main/src/app/layout.tsx
index cf45c40a02..8ed52b0de7 100644
--- a/frontends/main/src/app/layout.tsx
+++ b/frontends/main/src/app/layout.tsx
@@ -1,9 +1,5 @@
 import React from "react"
-import Header from "@/page-components/Header/Header"
-import Footer from "@/page-components/Footer/Footer"
-import { PageWrapper, PageWrapperInner } from "./styled"
 import Providers from "./providers"
-import { MITLearnGlobalStyles } from "ol-components"
 import Script from "next/script"
 
 import "./GlobalStyles"
@@ -116,14 +112,7 @@ j=d.createElement(s),dl=l!=='dataLayer'?'&l='+l:'';j.async=true;j.src=
             />
           </noscript>
         ) : null}
-        <Providers>
-          <MITLearnGlobalStyles />
-          <PageWrapper>
-            <Header />
-            <PageWrapperInner>{children}</PageWrapperInner>
-            <Footer />
-          </PageWrapper>
-        </Providers>
+        <Providers>{children}</Providers>
         {process.env.NEXT_PUBLIC_APPZI_URL ? (
           <Script async src={process.env.NEXT_PUBLIC_APPZI_URL} />
         ) : null}

From d7b84907028d775892db2e3871382b87059b162e Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Mon, 11 May 2026 15:57:43 -0400
Subject: [PATCH 02/23] restore global 404 page and add embed video page
 improvements

---
 .../VideoEmbedPage/VideoEmbedPage.tsx         | 24 +++++++-------
 frontends/main/src/app/(embed)/not-found.tsx  | 27 ++++++++++++++++
 .../src/app/(embed)/video/[id]/embed/page.tsx | 32 +++++++++++++++++++
 frontends/main/src/app/not-found.tsx          | 27 ++++++++++++++++
 4 files changed, 97 insertions(+), 13 deletions(-)
 create mode 100644 frontends/main/src/app/(embed)/not-found.tsx
 create mode 100644 frontends/main/src/app/not-found.tsx

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
index 246e3f504b..915e8d9d56 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
@@ -79,19 +79,17 @@ const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => {
 
   return (
     <EmbedContainer>
-      {sources.length > 0 && (
-        <VideoJsPlayer
-          key={videoId}
-          sources={sources}
-          tracks={video?.video?.caption_urls ?? []}
-          poster={
-            video?.video?.cover_image_url ?? video?.image?.url ?? undefined
-          }
-          autoplay={false}
-          controls
-          fluid={false}
-        />
-      )}
+      <VideoJsPlayer
+        key={videoId}
+        sources={sources}
+        tracks={video?.video?.caption_urls ?? []}
+        poster={
+          video?.video?.cover_image_url ?? video?.image?.url ?? undefined
+        }
+        autoplay={false}
+        controls
+        fluid={false}
+      />
     </EmbedContainer>
   )
 }
diff --git a/frontends/main/src/app/(embed)/not-found.tsx b/frontends/main/src/app/(embed)/not-found.tsx
new file mode 100644
index 0000000000..55e7a96ed7
--- /dev/null
+++ b/frontends/main/src/app/(embed)/not-found.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+
+export const metadata = {
+  title: "Not Found",
+}
+
+const NotFound: React.FC = () => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "#000",
+        color: "#fff",
+        fontFamily: "sans-serif",
+        fontSize: "1rem",
+      }}
+    >
+      Video not found
+    </div>
+  )
+}
+
+export default NotFound
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 3f449f9dbf..9a81dba571 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -7,6 +7,38 @@ import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/vid
 import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
 import { VideoResourceResourceTypeEnum } from "api/v1"
 import type { VideoResource } from "api/v1"
+import { safeGenerateMetadata } from "@/common/metadata"
+export const generateMetadata = ({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) =>
+  safeGenerateMetadata(async () => {
+    const { id } = await params
+    const videoId = Number(id)
+    if (!Number.isInteger(videoId) || videoId <= 0) {
+      return { title: "Video" }
+    }
+    const queryClient = getQueryClient()
+    // Catch here so errors don't propagate to safeGenerateMetadata, which
+    // would call notFound() on 404s and prevent us from returning a title.
+    const resource = await queryClient
+      .fetchQuery(learningResourceQueries.detail(videoId))
+      .catch(() => null)
+
+    const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4"]
+    const isEmbeddableVideo =
+      resource?.resource_type === VideoResourceResourceTypeEnum.Video &&
+      SUPPORTED_TYPES.includes(
+        resolveVideoSources(
+          (resource as VideoResource).video?.streaming_url,
+          resource.url,
+          resource.content_files?.[0]?.youtube_id,
+        )[0]?.type ?? "",
+      )
+
+    return { title: isEmbeddableVideo ? (resource?.title ?? "Video") : "Video" }
+  })
 
 const Page = async ({
   params,
diff --git a/frontends/main/src/app/not-found.tsx b/frontends/main/src/app/not-found.tsx
new file mode 100644
index 0000000000..cce0e80574
--- /dev/null
+++ b/frontends/main/src/app/not-found.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import Header from "@/page-components/Header/Header"
+import Footer from "@/page-components/Footer/Footer"
+import { PageWrapper, PageWrapperInner } from "@/app/styled"
+import { MITLearnGlobalStyles } from "ol-components"
+import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
+
+export const metadata = {
+  title: "Not Found",
+}
+
+const Page: React.FC = () => {
+  return (
+    <>
+      <MITLearnGlobalStyles />
+      <PageWrapper>
+        <Header />
+        <PageWrapperInner>
+          <NotFoundPage />
+        </PageWrapperInner>
+        <Footer />
+      </PageWrapper>
+    </>
+  )
+}
+
+export default Page

From dcbb7c0f9ffc2e6ad27cff711406a56c3c869eec Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Mon, 11 May 2026 16:11:35 -0400
Subject: [PATCH 03/23] fix formatting

---
 .../main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx    | 4 +---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx    | 6 +-----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
index 915e8d9d56..76c1d97b85 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
@@ -83,9 +83,7 @@ const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => {
         key={videoId}
         sources={sources}
         tracks={video?.video?.caption_urls ?? []}
-        poster={
-          video?.video?.cover_image_url ?? video?.image?.url ?? undefined
-        }
+        poster={video?.video?.cover_image_url ?? video?.image?.url ?? undefined}
         autoplay={false}
         controls
         fluid={false}
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 9a81dba571..6a12a4ea62 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -40,11 +40,7 @@ export const generateMetadata = ({
     return { title: isEmbeddableVideo ? (resource?.title ?? "Video") : "Video" }
   })
 
-const Page = async ({
-  params,
-}: {
-  params: Promise<{ id: string }>
-}) => {
+const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
   const videoId = Number(id)
   if (!Number.isInteger(videoId) || videoId <= 0) {

From 813960608cead9d9ae7a2c845901fc4c9dd24ac2 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Mon, 11 May 2026 16:17:34 -0400
Subject: [PATCH 04/23] fix lint error

---
 .../src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
index b67afab300..634ae1b514 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { setMockResponse, urls, factories } from "api/test-utils"
-import { renderWithProviders, screen } from "@/test-utils"
+import { renderWithProviders, screen, waitFor } from "@/test-utils"
 import { notFound } from "next/navigation"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
@@ -97,8 +97,7 @@ describe("VideoEmbedPage", () => {
 
     renderWithProviders(<VideoEmbedPage videoId={video.id} />)
 
-    await screen.findByTestId("video-js-player").catch(() => null)
-    expect(notFound).toHaveBeenCalled()
+    await waitFor(() => expect(notFound).toHaveBeenCalled())
   })
 
   test("does not call notFound while feature flags are still loading", () => {

From b7507332b32c99334edabbd55616d74aca15e94d Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 08:29:46 -0400
Subject: [PATCH 05/23] put back source.length guard

---
 .../VideoEmbedPage/VideoEmbedPage.tsx         | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
index 76c1d97b85..246e3f504b 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
@@ -79,15 +79,19 @@ const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => {
 
   return (
     <EmbedContainer>
-      <VideoJsPlayer
-        key={videoId}
-        sources={sources}
-        tracks={video?.video?.caption_urls ?? []}
-        poster={video?.video?.cover_image_url ?? video?.image?.url ?? undefined}
-        autoplay={false}
-        controls
-        fluid={false}
-      />
+      {sources.length > 0 && (
+        <VideoJsPlayer
+          key={videoId}
+          sources={sources}
+          tracks={video?.video?.caption_urls ?? []}
+          poster={
+            video?.video?.cover_image_url ?? video?.image?.url ?? undefined
+          }
+          autoplay={false}
+          controls
+          fluid={false}
+        />
+      )}
     </EmbedContainer>
   )
 }

From 65b527d80d982a623e0a6af5f9a38c52fd3e9b3a Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 09:03:23 -0400
Subject: [PATCH 06/23] move video detail page into (site) route group and
 remove misplaced duplicate

---
 .../detail => video}/[id]/page.tsx            |  0
 frontends/main/src/app/video/[id]/page.tsx    | 94 -------------------
 2 files changed, 94 deletions(-)
 rename frontends/main/src/app/(site)/{video-playlist/detail => video}/[id]/page.tsx (100%)
 delete mode 100644 frontends/main/src/app/video/[id]/page.tsx

diff --git a/frontends/main/src/app/(site)/video-playlist/detail/[id]/page.tsx b/frontends/main/src/app/(site)/video/[id]/page.tsx
similarity index 100%
rename from frontends/main/src/app/(site)/video-playlist/detail/[id]/page.tsx
rename to frontends/main/src/app/(site)/video/[id]/page.tsx
diff --git a/frontends/main/src/app/video/[id]/page.tsx b/frontends/main/src/app/video/[id]/page.tsx
deleted file mode 100644
index 0d0a7b2ac7..0000000000
--- a/frontends/main/src/app/video/[id]/page.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from "react"
-import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
-import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
-import {
-  learningResourceQueries,
-  videoPlaylistQueries,
-} from "api/hooks/learningResources"
-import { getQueryClient } from "@/app/getQueryClient"
-import VideoDetailPageRouter from "@/app-pages/VideoPlaylistCollectionPage/VideoDetailPageRouter"
-import { notFound } from "next/navigation"
-import type { VideoResource } from "api/v1"
-
-export const generateMetadata = async (props: PageProps<"/video/[id]">) => {
-  const { id } = await props.params
-  const videoId = Number(id)
-  if (!Number.isInteger(videoId) || videoId <= 0) {
-    notFound()
-  }
-  const queryClient = getQueryClient()
-
-  return safeGenerateMetadata(async () => {
-    const resource = await queryClient.fetchQuery(
-      learningResourceQueries.detail(videoId),
-    )
-    return standardizeMetadata({
-      title: resource.title,
-      description: resource.description ?? undefined,
-      image: resource.image?.url,
-      imageAlt: resource.image?.alt ?? undefined,
-    })
-  })
-}
-
-const Page: React.FC<PageProps<"/video/[id]">> = async ({
-  params,
-  searchParams,
-}) => {
-  const { id } = await params
-  const resolvedSearchParams = await searchParams
-  const videoId = Number(id)
-  if (!Number.isInteger(videoId) || videoId <= 0) {
-    notFound()
-  }
-
-  const queryClient = getQueryClient()
-
-  const video = (await queryClient.fetchQueryOr404(
-    learningResourceQueries.detail(videoId),
-  )) as VideoResource
-
-  // Resolve playlistId: prefer explicit ?playlist= param, fall back to video.playlists[0]
-  let playlistId: number | null = null
-  const rawPlaylist = resolvedSearchParams?.playlist
-
-  if (rawPlaylist !== undefined) {
-    // searchParams values can be string | string[]; treat array as invalid
-    if (Array.isArray(rawPlaylist)) {
-      notFound()
-    }
-    const parsed = Number(rawPlaylist)
-    if (!Number.isInteger(parsed) || parsed <= 0) {
-      notFound()
-    }
-    playlistId = parsed
-  } else {
-    // Use the first playlist the video belongs to, if any
-    const firstPlaylist = video.playlists?.[0]
-    if (firstPlaylist !== undefined) {
-      const parsed = Number(firstPlaylist)
-      if (Number.isInteger(parsed) && parsed > 0) {
-        playlistId = parsed
-      }
-    }
-  }
-
-  if (playlistId !== null) {
-    await Promise.all([
-      queryClient.fetchQueryOr404(videoPlaylistQueries.detail(playlistId)),
-      queryClient.prefetchQuery(
-        learningResourceQueries.items(playlistId, {
-          learning_resource_id: playlistId,
-        }),
-      ),
-    ])
-  }
-
-  return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
-      <VideoDetailPageRouter videoId={videoId} playlistId={playlistId} />
-    </HydrationBoundary>
-  )
-}
-
-export default Page

From fb7a0f2f75c6168bd197e445de843d175c6143a5 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 11:36:12 -0400
Subject: [PATCH 07/23] use custom 404 page for video embed not-found

---
 .../app-pages/ErrorPage/ErrorPageTemplate.tsx | 14 +++++---
 .../VideoEmbedPage/EmbedNotFoundPage.tsx      | 35 +++++++++++++++++++
 frontends/main/src/app/(embed)/not-found.tsx  | 19 ++--------
 3 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx

diff --git a/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx b/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
index 000e0212ff..9029347386 100644
--- a/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
+++ b/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
@@ -11,6 +11,7 @@ type ErrorPageTemplateProps = {
   title: string
   timSays?: string
   loading?: boolean
+  hideHomeButton?: boolean
 }
 
 const Page = styled.div(({ theme }) => ({
@@ -84,6 +85,7 @@ const Button = styled(ButtonLink)({
 export const ErrorContent: React.FC<ErrorPageTemplateProps> = ({
   title,
   timSays,
+  hideHomeButton = false,
 }) => {
   return (
     <ErrorContainer>
@@ -99,11 +101,13 @@ export const ErrorContent: React.FC<ErrorPageTemplateProps> = ({
       >
         {title}
       </Typography>
-      <Footer>
-        <Button variant="primary" href={HOME} Component="a">
-          Home
-        </Button>
-      </Footer>
+      {!hideHomeButton && (
+        <Footer>
+          <Button variant="primary" href={HOME} Component="a">
+            Home
+          </Button>
+        </Footer>
+      )}
     </ErrorContainer>
   )
 }
diff --git a/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx
new file mode 100644
index 0000000000..73d91b307e
--- /dev/null
+++ b/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import React from "react"
+import { ErrorContent } from "@/app-pages/ErrorPage/ErrorPageTemplate"
+import { styled } from "ol-components"
+import backgroundImage from "@/public/images/backgrounds/error_page_background.svg"
+
+const Page = styled.div(({ theme }) => ({
+  backgroundImage: `url(${backgroundImage.src})`,
+  backgroundAttachment: "fixed",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "contain",
+  flexGrow: 1,
+  height: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  [theme.breakpoints.down("sm")]: {
+    backgroundImage: "none",
+  },
+}))
+
+const EmbedNotFoundPage: React.FC = () => {
+  return (
+    <Page>
+      <ErrorContent
+        title="Looks like we couldn't find what you were looking for!"
+        timSays="404"
+        hideHomeButton
+      />
+    </Page>
+  )
+}
+
+export default EmbedNotFoundPage
diff --git a/frontends/main/src/app/(embed)/not-found.tsx b/frontends/main/src/app/(embed)/not-found.tsx
index 55e7a96ed7..30c00f1bec 100644
--- a/frontends/main/src/app/(embed)/not-found.tsx
+++ b/frontends/main/src/app/(embed)/not-found.tsx
@@ -1,27 +1,12 @@
 import React from "react"
+import EmbedNotFoundPage from "@/app-pages/VideoEmbedPage/EmbedNotFoundPage"
 
 export const metadata = {
   title: "Not Found",
 }
 
 const NotFound: React.FC = () => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100vw",
-        height: "100vh",
-        backgroundColor: "#000",
-        color: "#fff",
-        fontFamily: "sans-serif",
-        fontSize: "1rem",
-      }}
-    >
-      Video not found
-    </div>
-  )
+  return <EmbedNotFoundPage />
 }
 
 export default NotFound

From 41ce41f7eab016a9312653160a0695917d4fa0c4 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 13:14:36 -0400
Subject: [PATCH 08/23] use VideoResourcePlayer in embed page and support
 YouTube sources removed video-playlist-page from FF and as a guard on video
 pages

---
 .../VideoEmbedPage/VideoEmbedPage.tsx         | 89 +++----------------
 .../VideoDetailPage.tsx                       | 13 ---
 .../VideoPlaylistCollectionPage.test.tsx      | 49 ----------
 .../VideoPlaylistCollectionPage.tsx           | 12 ---
 .../VideoSeriesDetailPage.test.tsx            | 39 --------
 .../VideoSeriesDetailPage.tsx                 | 13 ---
 .../src/app/(embed)/video/[id]/embed/page.tsx |  4 +-
 frontends/main/src/common/feature_flags.ts    |  1 -
 .../CallToActionSection.tsx                   | 24 ++---
 9 files changed, 23 insertions(+), 221 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
index 246e3f504b..ad10e41803 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
@@ -1,47 +1,15 @@
 "use client"
 
-import React, { useMemo } from "react"
-import dynamic from "next/dynamic"
+import React from "react"
 import { styled } from "ol-components"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { notFound } from "next/navigation"
 import { useLearningResourcesDetail } from "api/hooks/learningResources"
-import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/videoSources"
-import { FeatureFlags } from "@/common/feature_flags"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
-import type { VideoJsPlayerProps } from "@/app-pages/VideoPlaylistCollectionPage/VideoJsPlayer"
+import VideoResourcePlayer from "@/app-pages/VideoPlaylistCollectionPage/VideoResourcePlayer"
 import type { VideoResource } from "api/v1"
 
-const VideoJsPlayer = dynamic<VideoJsPlayerProps>(
-  () => import("@/app-pages/VideoPlaylistCollectionPage/VideoJsPlayer"),
-  { ssr: false },
-)
-
-const EmbedContainer = styled.div({
-  position: "relative",
+const EmbedPlayer = styled(VideoResourcePlayer)({
   width: "100vw",
   height: "100vh",
-  maxHeight: "100vh",
-  backgroundColor: "#000",
-  overflow: "hidden",
-  ".video-js, .vjs-tech": {
-    width: "100% !important",
-    height: "100% !important",
-    position: "absolute",
-    top: 0,
-    left: 0,
-  },
-  ".vjs-big-play-button": {
-    width: "92px !important",
-    height: "92px !important",
-    lineHeight: "92px !important",
-    borderRadius: "50% !important",
-    backgroundColor: "#d8daddb3 !important",
-    border: "none !important",
-    fontSize: "4em !important",
-    marginTop: "-1.25em !important",
-    marginLeft: "-1.18em !important",
-  },
+  aspectRatio: "unset",
 })
 
 type VideoEmbedPageProps = {
@@ -49,50 +17,19 @@ type VideoEmbedPageProps = {
 }
 
 const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => {
-  const showVideoPlaylistPage = useFeatureFlagEnabled(
-    FeatureFlags.VideoPlaylistPage,
-  )
-  const flagsLoaded = useFeatureFlagsLoaded()
-
-  const { data: resource } = useLearningResourcesDetail(videoId)
+  const { data: resource, isLoading } = useLearningResourcesDetail(videoId)
   const video = resource as VideoResource | undefined
 
-  const sources = useMemo(
-    () =>
-      video
-        ? resolveVideoSources(
-            video.video?.streaming_url,
-            video.url,
-            video.content_files?.[0]?.youtube_id,
-          )
-        : [],
-    [video],
-  )
-
-  if (!showVideoPlaylistPage && flagsLoaded) {
-    notFound()
-  }
-
-  if (!showVideoPlaylistPage) {
-    return null
-  }
+  const videoTitleLabel = video?.title?.trim() || "Untitled video"
 
   return (
-    <EmbedContainer>
-      {sources.length > 0 && (
-        <VideoJsPlayer
-          key={videoId}
-          sources={sources}
-          tracks={video?.video?.caption_urls ?? []}
-          poster={
-            video?.video?.cover_image_url ?? video?.image?.url ?? undefined
-          }
-          autoplay={false}
-          controls
-          fluid={false}
-        />
-      )}
-    </EmbedContainer>
+    <EmbedPlayer
+      video={video}
+      videoId={videoId}
+      isLoading={isLoading}
+      videoTitleLabel={videoTitleLabel}
+      videoThumbnailAlt={`Video thumbnail for ${videoTitleLabel}`}
+    />
   )
 }
 
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx
index b03158203a..bd2f3b9084 100644
--- a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoDetailPage.tsx
@@ -3,7 +3,6 @@
 import React, { useEffect, useRef, useState } from "react"
 import Link from "next/link"
 import Image from "next/image"
-import { useFeatureFlagEnabled } from "posthog-js/react"
 import { Typography, styled, theme, Skeleton } from "ol-components"
 import VideoContainer from "./VideoContainer"
 import { RiShareForwardFill, RiPlayCircleFill } from "@remixicon/react"
@@ -16,9 +15,6 @@ import {
 import type { VideoResource, VideoPlaylistResource } from "api/v1"
 import { VideoResourceResourceTypeEnum } from "api/v1"
 import { formatDurationClockTime } from "ol-utilities"
-import { FeatureFlags } from "@/common/feature_flags"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
-import { notFound } from "next/navigation"
 import SharePopover from "@/components/SharePopover/SharePopover"
 import { buildVideoStructuredData } from "./videoStructuredData"
 import VideoResourcePlayer from "./VideoResourcePlayer"
@@ -345,11 +341,6 @@ const VideoDetailPage: React.FC<VideoDetailPageProps> = ({
     enabled: !!playlistId,
   })
 
-  const showVideoPlaylistPage = useFeatureFlagEnabled(
-    FeatureFlags.VideoPlaylistPage,
-  )
-  const flagsLoaded = useFeatureFlagsLoaded()
-
   const playlist = playlistData as VideoPlaylistResource | undefined
   const video = resource as VideoResource | undefined
 
@@ -398,10 +389,6 @@ const VideoDetailPage: React.FC<VideoDetailPageProps> = ({
   // See: https://developers.google.com/search/docs/appearance/structured-data/video
   const structuredData = !isLoading ? buildVideoStructuredData(video) : null
 
-  if (!showVideoPlaylistPage) {
-    return flagsLoaded ? notFound() : null
-  }
-
   return (
     <PageWrapper>
       {structuredData && (
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.test.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.test.tsx
index 0c828f232a..e4e28bde44 100644
--- a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.test.tsx
@@ -1,17 +1,9 @@
 import React from "react"
 import { setMockResponse, urls, factories } from "api/test-utils"
 import { renderWithProviders, screen } from "@/test-utils"
-import { notFound } from "next/navigation"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import VideoPage from "./VideoPlaylistCollectionPage"
 import { ResourceTypeEnum } from "api/v1"
 
-jest.mock("posthog-js/react")
-const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
-jest.mock("@/common/useFeatureFlagsLoaded")
-const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
-
 jest.mock("next-nprogress-bar", () => ({
   useRouter: () => ({}),
 }))
@@ -81,47 +73,6 @@ const setupApis = ({
 }
 
 describe("VideoPage", () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-    mockedUseFeatureFlagEnabled.mockReturnValue(true)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-  })
-
-  describe("feature-flag gating", () => {
-    test("calls notFound when the VideoPlaylistPage flag is disabled and flags are loaded", () => {
-      mockedUseFeatureFlagEnabled.mockReturnValue(false)
-      mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-      const playlist = makePlaylist()
-      setupApis({ playlistId: playlist.id, videos: [], playlist })
-
-      renderWithProviders(<VideoPage playlistId={playlist.id} />)
-
-      expect(notFound).toHaveBeenCalled()
-    })
-
-    test("does not call notFound when the flag is enabled", () => {
-      mockedUseFeatureFlagEnabled.mockReturnValue(true)
-      const playlist = makePlaylist()
-      setupApis({ playlistId: playlist.id, videos: [], playlist })
-
-      renderWithProviders(<VideoPage playlistId={playlist.id} />)
-
-      expect(notFound).not.toHaveBeenCalled()
-    })
-
-    test("does not call notFound when the flag is undefined and flags are not yet loaded", () => {
-      // posthog returns undefined before flags are evaluated
-      mockedUseFeatureFlagEnabled.mockReturnValue(undefined)
-      mockedUseFeatureFlagsLoaded.mockReturnValue(false)
-      const playlist = makePlaylist()
-      setupApis({ playlistId: playlist.id, videos: [], playlist })
-
-      renderWithProviders(<VideoPage playlistId={playlist.id} />)
-
-      expect(notFound).not.toHaveBeenCalled()
-    })
-  })
-
   describe("playlist header", () => {
     test("renders the playlist title once data is loaded", async () => {
       const playlist = makePlaylist()
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.tsx
index b0f0475255..840f789509 100644
--- a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.tsx
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoPlaylistCollectionPage.tsx
@@ -3,7 +3,6 @@
 import React from "react"
 import { styled, Skeleton, Typography } from "ol-components"
 import { Button } from "@mitodl/smoot-design"
-import { useFeatureFlagEnabled } from "posthog-js/react"
 import { notFound } from "next/navigation"
 import { useQuery } from "@tanstack/react-query"
 import {
@@ -21,8 +20,6 @@ import FeaturedVideo from "./FeaturedVideo"
 import VideoCollection from "./VideoCollection"
 import RelatedPlaylist from "./RelatedPlaylist"
 import VideoContainer from "./VideoContainer"
-import { FeatureFlags } from "@/common/feature_flags"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 
 const Page = styled.div(({ theme }) => ({
   backgroundColor: theme.custom.colors.lightGray1,
@@ -69,11 +66,6 @@ const VideoPlaylistCollectionPage: React.FC<
   const getVideoHref = (resource: VideoResource) =>
     `/video/${resource.id}?playlist=${playlistId}`
 
-  const showVideoPlaylistPage = useFeatureFlagEnabled(
-    FeatureFlags.VideoPlaylistPage,
-  )
-  const flagsLoaded = useFeatureFlagsLoaded()
-
   const {
     data: playlist,
     isLoading: playlistLoading,
@@ -99,10 +91,6 @@ const VideoPlaylistCollectionPage: React.FC<
     }),
   })
 
-  if (!showVideoPlaylistPage) {
-    return flagsLoaded ? notFound() : null
-  }
-
   if (isError) {
     return notFound()
   }
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx
index e6ed55c0a1..1a465d87b5 100644
--- a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.test.tsx
@@ -1,18 +1,10 @@
 import React from "react"
 import { setMockResponse, urls, factories } from "api/test-utils"
 import { renderWithProviders, screen } from "@/test-utils"
-import { notFound } from "next/navigation"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import VideoSeriesDetailPage from "./VideoSeriesDetailPage"
 import { ResourceTypeEnum } from "api/v1"
 import type { VideoResource, VideoPlaylistResource } from "api/v1"
 
-jest.mock("posthog-js/react")
-const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
-jest.mock("@/common/useFeatureFlagsLoaded")
-const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
-
 jest.mock("next-nprogress-bar", () => ({
   useRouter: () => ({}),
 }))
@@ -101,37 +93,6 @@ const renderPage = ({
 // ── Tests ────────────────────────────────────────────────────────────────────
 
 describe("VideoSeriesDetailPage", () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-    mockedUseFeatureFlagEnabled.mockReturnValue(true)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-  })
-
-  describe("feature-flag gating", () => {
-    test("calls notFound when VideoPlaylistPage flag is disabled and flags are loaded", () => {
-      mockedUseFeatureFlagEnabled.mockReturnValue(false)
-      mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-
-      renderPage()
-
-      expect(notFound).toHaveBeenCalled()
-    })
-
-    test("does not call notFound when the flag is enabled", () => {
-      renderPage()
-      expect(notFound).not.toHaveBeenCalled()
-    })
-
-    test("does not call notFound when the flag is undefined and flags are not yet loaded", () => {
-      mockedUseFeatureFlagEnabled.mockReturnValue(undefined)
-      mockedUseFeatureFlagsLoaded.mockReturnValue(false)
-
-      renderPage()
-
-      expect(notFound).not.toHaveBeenCalled()
-    })
-  })
-
   describe("video title and institution label", () => {
     test("renders the video title once data is loaded", async () => {
       const video = makeVideo({ title: "Introduction to Machine Learning" })
diff --git a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx
index ebd670f006..ee3eecee99 100644
--- a/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx
+++ b/frontends/main/src/app-pages/VideoPlaylistCollectionPage/VideoSeriesDetailPage.tsx
@@ -1,15 +1,11 @@
 "use client"
 
 import React, { useEffect, useRef } from "react"
-import { useFeatureFlagEnabled } from "posthog-js/react"
 import { Skeleton, styled } from "ol-components"
 import VideoContainer from "./VideoContainer"
 import { useLearningResourcesDetail } from "api/hooks/learningResources"
 import type { VideoResource, VideoPlaylistResource } from "api/v1"
 import { formatDurationClockTime } from "ol-utilities"
-import { FeatureFlags } from "@/common/feature_flags"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
-import { notFound } from "next/navigation"
 import { useSeriesNavigation } from "./useSeriesNavigation"
 import SeriesNavBar from "./SeriesNavBar"
 import UpNextSection from "./UpNextSection"
@@ -39,11 +35,6 @@ const VideoSeriesDetailPage: React.FC<VideoSeriesDetailPageProps> = ({
   const { data: resource, isLoading: videoLoading } =
     useLearningResourcesDetail(videoId)
 
-  const showVideoPlaylistPage = useFeatureFlagEnabled(
-    FeatureFlags.VideoPlaylistPage,
-  )
-  const flagsLoaded = useFeatureFlagsLoaded()
-
   const playlist = playlistData as VideoPlaylistResource | undefined
   const video = resource as VideoResource | undefined
   const {
@@ -84,10 +75,6 @@ const VideoSeriesDetailPage: React.FC<VideoSeriesDetailPageProps> = ({
   // See: https://developers.google.com/search/docs/appearance/structured-data/video
   const structuredData = !isLoading ? buildVideoStructuredData(video) : null
 
-  if (!showVideoPlaylistPage) {
-    return flagsLoaded ? notFound() : null
-  }
-
   return (
     <Styled.PageWrapper>
       {structuredData && (
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 6a12a4ea62..f347577a69 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -26,7 +26,7 @@ export const generateMetadata = ({
       .fetchQuery(learningResourceQueries.detail(videoId))
       .catch(() => null)
 
-    const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4"]
+    const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4", "video/youtube"]
     const isEmbeddableVideo =
       resource?.resource_type === VideoResourceResourceTypeEnum.Video &&
       SUPPORTED_TYPES.includes(
@@ -63,7 +63,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
     videoResource.content_files?.[0]?.youtube_id,
   )
 
-  const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4"]
+  const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4", "video/youtube"]
   if (sources.length === 0 || !SUPPORTED_TYPES.includes(sources[0].type)) {
     notFound()
   }
diff --git a/frontends/main/src/common/feature_flags.ts b/frontends/main/src/common/feature_flags.ts
index 978bcf6d12..9534437713 100644
--- a/frontends/main/src/common/feature_flags.ts
+++ b/frontends/main/src/common/feature_flags.ts
@@ -13,7 +13,6 @@ export enum FeatureFlags {
   VideoShorts = "video-shorts",
   MitxOnlineProductPages = "mitxonline-product-pages",
   CourseOutlineSection = "course-outline-section",
-  VideoPlaylistPage = "video-playlist-page",
   PodcastDetailPage = "podcast-detail-page",
 }
 
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx b/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx
index 1cb3aff9f8..0c5f2a4233 100644
--- a/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx
+++ b/frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx
@@ -314,11 +314,9 @@ const getResourceUrl = (
   resource: LearningResource,
   {
     mitxonlineProductPages,
-    showVideoPlaylistPage,
     showPodcastPage,
   }: {
     mitxonlineProductPages?: boolean
-    showVideoPlaylistPage?: boolean
     showPodcastPage?: boolean
   },
 ) => {
@@ -345,16 +343,14 @@ const getResourceUrl = (
       })
     }
   }
-  if (showVideoPlaylistPage) {
-    if (resource.resource_type === ResourceTypeEnum.VideoPlaylist) {
-      return videoPlaylistPageView(resource.id.toString())
-    }
-    if (
-      resource.resource_type === ResourceTypeEnum.Video &&
-      resource?.playlists?.length > 0
-    ) {
-      return videoDetailPageView(resource.id, Number(resource.playlists[0]))
-    }
+  if (resource.resource_type === ResourceTypeEnum.VideoPlaylist) {
+    return videoPlaylistPageView(resource.id.toString())
+  }
+  if (
+    resource.resource_type === ResourceTypeEnum.Video &&
+    resource?.playlists?.length > 0
+  ) {
+    return videoDetailPageView(resource.id, Number(resource.playlists[0]))
   }
 
   if (showPodcastPage) {
@@ -401,9 +397,6 @@ const CallToActionSection = ({
   const mitxonlineProductPages = useFeatureFlagEnabled(
     FeatureFlags.MitxOnlineProductPages,
   )
-  const showVideoPlaylistPage = useFeatureFlagEnabled(
-    FeatureFlags.VideoPlaylistPage,
-  )
   const showPodcastPage = useFeatureFlagEnabled(FeatureFlags.PodcastDetailPage)
 
   if (hide) {
@@ -433,7 +426,6 @@ const CallToActionSection = ({
   const url = appendUtmParams(
     getResourceUrl(resource, {
       mitxonlineProductPages,
-      showVideoPlaylistPage,
       showPodcastPage,
     }),
     resource.title,

From c81c24dcd1e02693c92125eef3d239c11ce7e5b3 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 13:20:07 -0400
Subject: [PATCH 09/23] add noindex metadata and fix youtube embed for video
 embed page

---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index f347577a69..64c6e8ea09 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -7,7 +7,7 @@ import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/vid
 import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
 import { VideoResourceResourceTypeEnum } from "api/v1"
 import type { VideoResource } from "api/v1"
-import { safeGenerateMetadata } from "@/common/metadata"
+import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
 export const generateMetadata = ({
   params,
 }: {
@@ -37,7 +37,11 @@ export const generateMetadata = ({
         )[0]?.type ?? "",
       )
 
-    return { title: isEmbeddableVideo ? (resource?.title ?? "Video") : "Video" }
+    return standardizeMetadata({
+      title: isEmbeddableVideo ? (resource?.title ?? "Video") : "Video",
+      robots: "noindex, nofollow",
+      social: false,
+    })
   })
 
 const Page = async ({ params }: { params: Promise<{ id: string }> }) => {

From f934181d9a266b3b42cac226641b2c682c3b55aa Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 13:47:27 -0400
Subject: [PATCH 10/23] add (embed)/error.tsx and supporting changes for embed
 error handling

---
 .../app-pages/ErrorPage/FallbackErrorPage.tsx | 13 ++++++++++--
 frontends/main/src/app/(embed)/error.tsx      | 20 +++++++++++++++++++
 .../src/app/(embed)/video/[id]/embed/page.tsx | 13 ++++++++++--
 .../src/app/(site)/[...unmatched]/page.tsx    |  5 +++++
 frontends/main/src/app/not-found.tsx          | 17 +---------------
 5 files changed, 48 insertions(+), 20 deletions(-)
 create mode 100644 frontends/main/src/app/(embed)/error.tsx
 create mode 100644 frontends/main/src/app/(site)/[...unmatched]/page.tsx

diff --git a/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx b/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx
index bfbf85dba1..87c5eb0be1 100644
--- a/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx
+++ b/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx
@@ -3,8 +3,17 @@
 import React from "react"
 import ErrorPageTemplate from "./ErrorPageTemplate"
 
-const FallbackErrorPage = () => {
-  return <ErrorPageTemplate title="Something went wrong." />
+type FallbackErrorPageProps = {
+  hideHomeButton?: boolean
+}
+
+const FallbackErrorPage = ({ hideHomeButton }: FallbackErrorPageProps) => {
+  return (
+    <ErrorPageTemplate
+      title="Something went wrong."
+      hideHomeButton={hideHomeButton}
+    />
+  )
 }
 
 export default FallbackErrorPage
diff --git a/frontends/main/src/app/(embed)/error.tsx b/frontends/main/src/app/(embed)/error.tsx
new file mode 100644
index 0000000000..91ec9a2732
--- /dev/null
+++ b/frontends/main/src/app/(embed)/error.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import React, { useEffect } from "react"
+import * as Sentry from "@sentry/nextjs"
+import FallbackErrorPage from "@/app-pages/ErrorPage/FallbackErrorPage"
+
+export const metadata = {
+  title: "Error",
+}
+
+const Error = ({ error }: { error: Error }) => {
+  useEffect(() => {
+    console.error("Error encountered in React error boundary:", error)
+    Sentry.captureException(error)
+  }, [error])
+
+  return <FallbackErrorPage hideHomeButton />
+}
+
+export default Error
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 64c6e8ea09..a2d7fb379f 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -26,7 +26,11 @@ export const generateMetadata = ({
       .fetchQuery(learningResourceQueries.detail(videoId))
       .catch(() => null)
 
-    const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4", "video/youtube"]
+    const SUPPORTED_TYPES = [
+      "application/x-mpegURL",
+      "video/mp4",
+      "video/youtube",
+    ]
     const isEmbeddableVideo =
       resource?.resource_type === VideoResourceResourceTypeEnum.Video &&
       SUPPORTED_TYPES.includes(
@@ -67,11 +71,16 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
     videoResource.content_files?.[0]?.youtube_id,
   )
 
-  const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4", "video/youtube"]
+  const SUPPORTED_TYPES = [
+    "application/x-mpegURL",
+    "video/mp4",
+    "video/youtube",
+  ]
   if (sources.length === 0 || !SUPPORTED_TYPES.includes(sources[0].type)) {
     notFound()
   }
 
+
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <VideoEmbedPage videoId={videoId} />
diff --git a/frontends/main/src/app/(site)/[...unmatched]/page.tsx b/frontends/main/src/app/(site)/[...unmatched]/page.tsx
new file mode 100644
index 0000000000..e02efb4a9c
--- /dev/null
+++ b/frontends/main/src/app/(site)/[...unmatched]/page.tsx
@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation"
+
+const UnmatchedPage = () => notFound()
+
+export default UnmatchedPage
diff --git a/frontends/main/src/app/not-found.tsx b/frontends/main/src/app/not-found.tsx
index cce0e80574..46eea90c11 100644
--- a/frontends/main/src/app/not-found.tsx
+++ b/frontends/main/src/app/not-found.tsx
@@ -1,8 +1,4 @@
 import React from "react"
-import Header from "@/page-components/Header/Header"
-import Footer from "@/page-components/Footer/Footer"
-import { PageWrapper, PageWrapperInner } from "@/app/styled"
-import { MITLearnGlobalStyles } from "ol-components"
 import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
 
 export const metadata = {
@@ -10,18 +6,7 @@ export const metadata = {
 }
 
 const Page: React.FC = () => {
-  return (
-    <>
-      <MITLearnGlobalStyles />
-      <PageWrapper>
-        <Header />
-        <PageWrapperInner>
-          <NotFoundPage />
-        </PageWrapperInner>
-        <Footer />
-      </PageWrapper>
-    </>
-  )
+  return <NotFoundPage />
 }
 
 export default Page

From c3f214d429823e0bcda3898b2d4b1adf57dda909 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 13:50:50 -0400
Subject: [PATCH 11/23] fix formatting

---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index a2d7fb379f..17dec1a1eb 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -80,7 +80,6 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
     notFound()
   }
 
-
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <VideoEmbedPage videoId={videoId} />

From 666d1aaf188ad7dd750b3f912903e72f1d8e9869 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 14:13:39 -0400
Subject: [PATCH 12/23] remove stale feature flag tests from VideoEmbedPage

---
 .../VideoEmbedPage/VideoEmbedPage.test.tsx    | 45 +------------------
 1 file changed, 1 insertion(+), 44 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
index 634ae1b514..2266e49dff 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
@@ -1,28 +1,14 @@
 import React from "react"
 import { setMockResponse, urls, factories } from "api/test-utils"
-import { renderWithProviders, screen, waitFor } from "@/test-utils"
-import { notFound } from "next/navigation"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
+import { renderWithProviders, screen } from "@/test-utils"
 import VideoEmbedPage from "./VideoEmbedPage"
 import type { VideoResource } from "api/v1"
 import { ResourceTypeEnum } from "api/v1"
 
-jest.mock("posthog-js/react")
-const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
-
-jest.mock("@/common/useFeatureFlagsLoaded")
-const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
-
 jest.mock("next-nprogress-bar", () => ({
   useRouter: () => ({}),
 }))
 
-jest.mock("next/navigation", () => ({
-  ...jest.requireActual("next/navigation"),
-  notFound: jest.fn(),
-}))
-
 jest.mock("@/app-pages/VideoPlaylistCollectionPage/VideoJsPlayer", () => ({
   __esModule: true,
   default: (props: { sources?: { src: string; type: string }[] }) => (
@@ -51,11 +37,6 @@ const setupVideoApi = (video: VideoResource) => {
 }
 
 describe("VideoEmbedPage", () => {
-  beforeEach(() => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(true)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-  })
-
   test("renders VideoJsPlayer for a video with a streaming URL", async () => {
     const video = makeVideo()
     setupVideoApi(video)
@@ -87,28 +68,4 @@ describe("VideoEmbedPage", () => {
     const sources = JSON.parse(player.getAttribute("data-sources") ?? "[]")
     expect(sources[0].type).toBe("video/mp4")
   })
-
-  test("calls notFound when feature flag is off and flags are loaded", async () => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(false)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-
-    const video = makeVideo()
-    setupVideoApi(video)
-
-    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
-
-    await waitFor(() => expect(notFound).toHaveBeenCalled())
-  })
-
-  test("does not call notFound while feature flags are still loading", () => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(false)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(false)
-
-    const video = makeVideo()
-    setupVideoApi(video)
-
-    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
-
-    expect(notFound).not.toHaveBeenCalled()
-  })
 })

From 7dc22f2731f1dbd1f416876f621dc0cad1547ad9 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Tue, 12 May 2026 15:55:48 -0400
Subject: [PATCH 13/23] standardize metadata for error/not-found pages

---
 .../app-pages/ErrorPage/ErrorPageTemplate.tsx |  7 ++++++-
 frontends/main/src/app/(embed)/error.tsx      |  4 ----
 frontends/main/src/app/(embed)/layout.tsx     |  1 -
 frontends/main/src/app/(embed)/not-found.tsx  |  7 +++++--
 .../src/app/(embed)/video/[id]/embed/page.tsx | 20 +++++++++++++------
 .../src/app/(site)/[...unmatched]/page.tsx    |  2 ++
 frontends/main/src/app/(site)/error.tsx       |  4 ----
 frontends/main/src/app/(site)/layout.tsx      |  1 -
 frontends/main/src/app/(site)/not-found.tsx   |  7 +++++--
 frontends/main/src/app/not-found.tsx          |  7 +++++--
 10 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx b/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
index 9029347386..2505ed2646 100644
--- a/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
+++ b/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
@@ -116,6 +116,7 @@ const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({
   title,
   timSays,
   loading = false,
+  hideHomeButton = false,
 }) => {
   if (loading) {
     return (
@@ -140,7 +141,11 @@ const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({
   }
   return (
     <Page>
-      <ErrorContent title={title} timSays={timSays} />
+      <ErrorContent
+        title={title}
+        timSays={timSays}
+        hideHomeButton={hideHomeButton}
+      />
     </Page>
   )
 }
diff --git a/frontends/main/src/app/(embed)/error.tsx b/frontends/main/src/app/(embed)/error.tsx
index 91ec9a2732..e986d520e5 100644
--- a/frontends/main/src/app/(embed)/error.tsx
+++ b/frontends/main/src/app/(embed)/error.tsx
@@ -4,10 +4,6 @@ import React, { useEffect } from "react"
 import * as Sentry from "@sentry/nextjs"
 import FallbackErrorPage from "@/app-pages/ErrorPage/FallbackErrorPage"
 
-export const metadata = {
-  title: "Error",
-}
-
 const Error = ({ error }: { error: Error }) => {
   useEffect(() => {
     console.error("Error encountered in React error boundary:", error)
diff --git a/frontends/main/src/app/(embed)/layout.tsx b/frontends/main/src/app/(embed)/layout.tsx
index 27cfa9f248..e5882afa90 100644
--- a/frontends/main/src/app/(embed)/layout.tsx
+++ b/frontends/main/src/app/(embed)/layout.tsx
@@ -1,6 +1,5 @@
 import React from "react"
 import { MITLearnGlobalStyles } from "ol-components"
-
 export default function EmbedLayout({
   children,
 }: {
diff --git a/frontends/main/src/app/(embed)/not-found.tsx b/frontends/main/src/app/(embed)/not-found.tsx
index 30c00f1bec..41044fc5fc 100644
--- a/frontends/main/src/app/(embed)/not-found.tsx
+++ b/frontends/main/src/app/(embed)/not-found.tsx
@@ -1,9 +1,12 @@
 import React from "react"
 import EmbedNotFoundPage from "@/app-pages/VideoEmbedPage/EmbedNotFoundPage"
+import { standardizeMetadata } from "@/common/metadata"
+import type { Metadata } from "next"
 
-export const metadata = {
+export const metadata: Metadata = standardizeMetadata({
   title: "Not Found",
-}
+  social: false,
+})
 
 const NotFound: React.FC = () => {
   return <EmbedNotFoundPage />
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 17dec1a1eb..6dd44d0705 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -7,7 +7,11 @@ import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/vid
 import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
 import { VideoResourceResourceTypeEnum } from "api/v1"
 import type { VideoResource } from "api/v1"
-import { safeGenerateMetadata, standardizeMetadata } from "@/common/metadata"
+import {
+  safeGenerateMetadata,
+  standardizeMetadata,
+  MetadataNotFound,
+} from "@/common/metadata"
 export const generateMetadata = ({
   params,
 }: {
@@ -17,14 +21,14 @@ export const generateMetadata = ({
     const { id } = await params
     const videoId = Number(id)
     if (!Number.isInteger(videoId) || videoId <= 0) {
-      return { title: "Video" }
+      throw new MetadataNotFound()
     }
     const queryClient = getQueryClient()
-    // Catch here so errors don't propagate to safeGenerateMetadata, which
-    // would call notFound() on 404s and prevent us from returning a title.
     const resource = await queryClient
       .fetchQuery(learningResourceQueries.detail(videoId))
-      .catch(() => null)
+      .catch(() => {
+        throw new MetadataNotFound()
+      })
 
     const SUPPORTED_TYPES = [
       "application/x-mpegURL",
@@ -41,8 +45,12 @@ export const generateMetadata = ({
         )[0]?.type ?? "",
       )
 
+    if (!isEmbeddableVideo) {
+      throw new MetadataNotFound()
+    }
+
     return standardizeMetadata({
-      title: isEmbeddableVideo ? (resource?.title ?? "Video") : "Video",
+      title: resource?.title ?? "Video",
       robots: "noindex, nofollow",
       social: false,
     })
diff --git a/frontends/main/src/app/(site)/[...unmatched]/page.tsx b/frontends/main/src/app/(site)/[...unmatched]/page.tsx
index e02efb4a9c..c3cf7b09f6 100644
--- a/frontends/main/src/app/(site)/[...unmatched]/page.tsx
+++ b/frontends/main/src/app/(site)/[...unmatched]/page.tsx
@@ -1,5 +1,7 @@
 import { notFound } from "next/navigation"
 
+export const generateMetadata = () => notFound()
+
 const UnmatchedPage = () => notFound()
 
 export default UnmatchedPage
diff --git a/frontends/main/src/app/(site)/error.tsx b/frontends/main/src/app/(site)/error.tsx
index 970d257f88..046773bef7 100644
--- a/frontends/main/src/app/(site)/error.tsx
+++ b/frontends/main/src/app/(site)/error.tsx
@@ -15,10 +15,6 @@ import FallbackErrorPage from "@/app-pages/ErrorPage/FallbackErrorPage"
 import { ForbiddenError } from "@/common/errors"
 import ForbiddenPage from "@/app-pages/ErrorPage/ForbiddenPage"
 
-export const metadata = {
-  title: "Error",
-}
-
 const Error = ({ error }: { error: Error }) => {
   useEffect(() => {
     console.error("Error encountered in React error boundary:", error)
diff --git a/frontends/main/src/app/(site)/layout.tsx b/frontends/main/src/app/(site)/layout.tsx
index 3d11cbf5ea..633486b373 100644
--- a/frontends/main/src/app/(site)/layout.tsx
+++ b/frontends/main/src/app/(site)/layout.tsx
@@ -3,7 +3,6 @@ import Header from "@/page-components/Header/Header"
 import Footer from "@/page-components/Footer/Footer"
 import { PageWrapper, PageWrapperInner } from "@/app/styled"
 import { MITLearnGlobalStyles } from "ol-components"
-
 export default function SiteLayout({
   children,
 }: {
diff --git a/frontends/main/src/app/(site)/not-found.tsx b/frontends/main/src/app/(site)/not-found.tsx
index 46eea90c11..2c5edf9dcc 100644
--- a/frontends/main/src/app/(site)/not-found.tsx
+++ b/frontends/main/src/app/(site)/not-found.tsx
@@ -1,9 +1,12 @@
 import React from "react"
 import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
+import { standardizeMetadata } from "@/common/metadata"
+import type { Metadata } from "next"
 
-export const metadata = {
+export const metadata: Metadata = standardizeMetadata({
   title: "Not Found",
-}
+  social: false,
+})
 
 const Page: React.FC = () => {
   return <NotFoundPage />
diff --git a/frontends/main/src/app/not-found.tsx b/frontends/main/src/app/not-found.tsx
index 46eea90c11..2c5edf9dcc 100644
--- a/frontends/main/src/app/not-found.tsx
+++ b/frontends/main/src/app/not-found.tsx
@@ -1,9 +1,12 @@
 import React from "react"
 import NotFoundPage from "@/app-pages/ErrorPage/NotFoundPage"
+import { standardizeMetadata } from "@/common/metadata"
+import type { Metadata } from "next"
 
-export const metadata = {
+export const metadata: Metadata = standardizeMetadata({
   title: "Not Found",
-}
+  social: false,
+})
 
 const Page: React.FC = () => {
   return <NotFoundPage />

From 7038522527f13c299daeba03170de1e8de66d98a Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Wed, 13 May 2026 09:01:18 -0400
Subject: [PATCH 14/23] add test coverage for video embed page route and
 YouTube source type

---
 .../VideoEmbedPage/VideoEmbedPage.test.tsx    |  21 +++
 .../(embed)/video/[id]/embed/page.test.tsx    | 124 ++++++++++++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
index 2266e49dff..8b3a9fa99f 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
@@ -68,4 +68,25 @@ describe("VideoEmbedPage", () => {
     const sources = JSON.parse(player.getAttribute("data-sources") ?? "[]")
     expect(sources[0].type).toBe("video/mp4")
   })
+
+  test("renders YouTube iframe for a video with content_files youtube_id", async () => {
+    const video = makeVideo({
+      video: {
+        id: 3,
+        streaming_url: null,
+        duration: "PT3M",
+        caption_urls: [],
+        cover_image_url: null,
+      },
+      content_files: [
+        factories.learningResources.contentFile({ youtube_id: "dQw4w9WgXcQ" }),
+      ],
+    })
+    setupVideoApi(video)
+
+    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+
+    const iframe = await screen.findByTitle(/^Video: /)
+    expect(iframe).toHaveAttribute("src", expect.stringContaining("dQw4w9WgXcQ"))
+  })
 })
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
new file mode 100644
index 0000000000..b8852b5e22
--- /dev/null
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
@@ -0,0 +1,124 @@
+import React from "react"
+import { notFound } from "next/navigation"
+import { factories } from "api/test-utils"
+import type { VideoResource } from "api/v1"
+import { getQueryClient } from "@/app/getQueryClient"
+import Page from "./page"
+
+jest.mock("@/app/getQueryClient", () => ({
+  getQueryClient: jest.fn(),
+}))
+
+jest.mock("@tanstack/react-query", () => ({
+  ...jest.requireActual("@tanstack/react-query"),
+  dehydrate: jest.fn().mockReturnValue({}),
+}))
+
+jest.mock("@/app-pages/VideoEmbedPage/VideoEmbedPage", () => ({
+  __esModule: true,
+  default: () => null,
+}))
+
+const mockGetQueryClient = jest.mocked(getQueryClient)
+const mockNotFound = jest.mocked(notFound)
+
+describe("video embed page.tsx server component", () => {
+  let mockFetchQueryOr404: jest.Mock
+
+  beforeEach(() => {
+    mockFetchQueryOr404 = jest.fn()
+    mockGetQueryClient.mockReturnValue(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      { fetchQueryOr404: mockFetchQueryOr404 } as any,
+    )
+    mockNotFound.mockImplementation(() => {
+      throw new Error("NEXT_NOT_FOUND")
+    })
+  })
+
+  test("calls notFound for a non-integer id", async () => {
+    await expect(
+      Page({ params: Promise.resolve({ id: "abc" }) }),
+    ).rejects.toThrow("NEXT_NOT_FOUND")
+    expect(notFound).toHaveBeenCalled()
+  })
+
+  test("calls notFound for id of zero", async () => {
+    await expect(
+      Page({ params: Promise.resolve({ id: "0" }) }),
+    ).rejects.toThrow("NEXT_NOT_FOUND")
+    expect(notFound).toHaveBeenCalled()
+  })
+
+  test("calls notFound for a negative id", async () => {
+    await expect(
+      Page({ params: Promise.resolve({ id: "-1" }) }),
+    ).rejects.toThrow("NEXT_NOT_FOUND")
+    expect(notFound).toHaveBeenCalled()
+  })
+
+  test("calls notFound when the resource is not a video", async () => {
+    const course = factories.learningResources.course()
+    mockFetchQueryOr404.mockResolvedValue(course)
+
+    await expect(
+      Page({ params: Promise.resolve({ id: String(course.id) }) }),
+    ).rejects.toThrow("NEXT_NOT_FOUND")
+    expect(notFound).toHaveBeenCalled()
+  })
+
+  test("calls notFound when the video has no supported sources", async () => {
+    const video = factories.learningResources.video({
+      video: {
+        id: 1,
+        streaming_url: null,
+        duration: "PT5M",
+        caption_urls: [],
+        cover_image_url: null,
+      },
+      url: "https://example.com/not-youtube",
+      content_files: [],
+    }) as VideoResource
+    mockFetchQueryOr404.mockResolvedValue(video)
+
+    await expect(
+      Page({ params: Promise.resolve({ id: String(video.id) }) }),
+    ).rejects.toThrow("NEXT_NOT_FOUND")
+    expect(notFound).toHaveBeenCalled()
+  })
+
+  test("does not call notFound for a valid HLS video", async () => {
+    const video = factories.learningResources.video({
+      video: {
+        id: 1,
+        streaming_url: "https://cdn.example.com/video.m3u8",
+        duration: "PT5M",
+        caption_urls: [],
+        cover_image_url: null,
+      },
+    }) as VideoResource
+    mockFetchQueryOr404.mockResolvedValue(video)
+
+    await Page({ params: Promise.resolve({ id: String(video.id) }) })
+    expect(notFound).not.toHaveBeenCalled()
+  })
+
+  test("does not call notFound for a valid YouTube video via content_files", async () => {
+    const video = factories.learningResources.video({
+      video: {
+        id: 1,
+        streaming_url: null,
+        duration: "PT5M",
+        caption_urls: [],
+        cover_image_url: null,
+      },
+      content_files: [
+        factories.learningResources.contentFile({ youtube_id: "dQw4w9WgXcQ" }),
+      ],
+    }) as VideoResource
+    mockFetchQueryOr404.mockResolvedValue(video)
+
+    await Page({ params: Promise.resolve({ id: String(video.id) }) })
+    expect(notFound).not.toHaveBeenCalled()
+  })
+})

From 0080d5dd2e2b96e356fb72df352dae914ce3e0f4 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Wed, 13 May 2026 09:07:41 -0400
Subject: [PATCH 15/23] extract SUPPORTED_TYPES to module scope in embed page

---
 .../VideoEmbedPage/VideoEmbedPage.test.tsx          |  5 ++++-
 .../main/src/app/(embed)/video/[id]/embed/page.tsx  | 13 +++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
index 8b3a9fa99f..db4e94e994 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
@@ -87,6 +87,9 @@ describe("VideoEmbedPage", () => {
     renderWithProviders(<VideoEmbedPage videoId={video.id} />)
 
     const iframe = await screen.findByTitle(/^Video: /)
-    expect(iframe).toHaveAttribute("src", expect.stringContaining("dQw4w9WgXcQ"))
+    expect(iframe).toHaveAttribute(
+      "src",
+      expect.stringContaining("dQw4w9WgXcQ"),
+    )
   })
 })
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 6dd44d0705..858539369d 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -12,6 +12,9 @@ import {
   standardizeMetadata,
   MetadataNotFound,
 } from "@/common/metadata"
+
+const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4", "video/youtube"]
+
 export const generateMetadata = ({
   params,
 }: {
@@ -30,11 +33,6 @@ export const generateMetadata = ({
         throw new MetadataNotFound()
       })
 
-    const SUPPORTED_TYPES = [
-      "application/x-mpegURL",
-      "video/mp4",
-      "video/youtube",
-    ]
     const isEmbeddableVideo =
       resource?.resource_type === VideoResourceResourceTypeEnum.Video &&
       SUPPORTED_TYPES.includes(
@@ -79,11 +77,6 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
     videoResource.content_files?.[0]?.youtube_id,
   )
 
-  const SUPPORTED_TYPES = [
-    "application/x-mpegURL",
-    "video/mp4",
-    "video/youtube",
-  ]
   if (sources.length === 0 || !SUPPORTED_TYPES.includes(sources[0].type)) {
     notFound()
   }

From 1e5770404b59d8a55a7898e3417c1b4e88f54e73 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Wed, 13 May 2026 09:12:38 -0400
Subject: [PATCH 16/23] lint fix

---
 frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
index b8852b5e22..abbefe3654 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { notFound } from "next/navigation"
 import { factories } from "api/test-utils"
 import type { VideoResource } from "api/v1"

From 22c5161bdf42128c7b51317e0d81136032bd8c17 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <daniellerichard1@gmail.com>
Date: Fri, 15 May 2026 13:27:45 -0400
Subject: [PATCH 17/23] Update
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 858539369d..a20c7c259b 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -48,7 +48,7 @@ export const generateMetadata = ({
     }
 
     return standardizeMetadata({
-      title: resource?.title ?? "Video",
+      title: resource.title
       robots: "noindex, nofollow",
       social: false,
     })

From 0d97b3cf16f3aae61489dd246cf5448ac55d4059 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <daniellerichard1@gmail.com>
Date: Fri, 15 May 2026 13:27:57 -0400
Subject: [PATCH 18/23] Update
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index a20c7c259b..411406b25c 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -37,7 +37,7 @@ export const generateMetadata = ({
       resource?.resource_type === VideoResourceResourceTypeEnum.Video &&
       SUPPORTED_TYPES.includes(
         resolveVideoSources(
-          (resource as VideoResource).video?.streaming_url,
+          (resource).video?.streaming_url,
           resource.url,
           resource.content_files?.[0]?.youtube_id,
         )[0]?.type ?? "",

From ee773df4dd1491516e99dc4b0b40df3bee02c647 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <daniellerichard1@gmail.com>
Date: Fri, 15 May 2026 13:29:24 -0400
Subject: [PATCH 19/23] Update
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 411406b25c..3be1fbb077 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -83,7 +83,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <VideoEmbedPage videoId={videoId} />
+      <VideoEmbedPage videoResource={videoResource} />
     </HydrationBoundary>
   )
 }

From 2f5a08f0b76cfd5c842f8f68b9f1c5fe351bee6a Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Fri, 15 May 2026 13:36:33 -0400
Subject: [PATCH 20/23] rename hideHomeButton to showHomeButton on error page
 components

---
 .../main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx | 10 +++++-----
 .../main/src/app-pages/ErrorPage/FallbackErrorPage.tsx |  6 +++---
 .../src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx |  2 +-
 frontends/main/src/app/(embed)/error.tsx               |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx b/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
index 2505ed2646..aa75fe4935 100644
--- a/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
+++ b/frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx
@@ -11,7 +11,7 @@ type ErrorPageTemplateProps = {
   title: string
   timSays?: string
   loading?: boolean
-  hideHomeButton?: boolean
+  showHomeButton?: boolean
 }
 
 const Page = styled.div(({ theme }) => ({
@@ -85,7 +85,7 @@ const Button = styled(ButtonLink)({
 export const ErrorContent: React.FC<ErrorPageTemplateProps> = ({
   title,
   timSays,
-  hideHomeButton = false,
+  showHomeButton = true,
 }) => {
   return (
     <ErrorContainer>
@@ -101,7 +101,7 @@ export const ErrorContent: React.FC<ErrorPageTemplateProps> = ({
       >
         {title}
       </Typography>
-      {!hideHomeButton && (
+      {showHomeButton && (
         <Footer>
           <Button variant="primary" href={HOME} Component="a">
             Home
@@ -116,7 +116,7 @@ const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({
   title,
   timSays,
   loading = false,
-  hideHomeButton = false,
+  showHomeButton = true,
 }) => {
   if (loading) {
     return (
@@ -144,7 +144,7 @@ const ErrorPageTemplate: React.FC<ErrorPageTemplateProps> = ({
       <ErrorContent
         title={title}
         timSays={timSays}
-        hideHomeButton={hideHomeButton}
+        showHomeButton={showHomeButton}
       />
     </Page>
   )
diff --git a/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx b/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx
index 87c5eb0be1..dbb18689de 100644
--- a/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx
+++ b/frontends/main/src/app-pages/ErrorPage/FallbackErrorPage.tsx
@@ -4,14 +4,14 @@ import React from "react"
 import ErrorPageTemplate from "./ErrorPageTemplate"
 
 type FallbackErrorPageProps = {
-  hideHomeButton?: boolean
+  showHomeButton?: boolean
 }
 
-const FallbackErrorPage = ({ hideHomeButton }: FallbackErrorPageProps) => {
+const FallbackErrorPage = ({ showHomeButton }: FallbackErrorPageProps) => {
   return (
     <ErrorPageTemplate
       title="Something went wrong."
-      hideHomeButton={hideHomeButton}
+      showHomeButton={showHomeButton}
     />
   )
 }
diff --git a/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx
index 73d91b307e..d9b04ad6de 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/EmbedNotFoundPage.tsx
@@ -26,7 +26,7 @@ const EmbedNotFoundPage: React.FC = () => {
       <ErrorContent
         title="Looks like we couldn't find what you were looking for!"
         timSays="404"
-        hideHomeButton
+        showHomeButton={false}
       />
     </Page>
   )
diff --git a/frontends/main/src/app/(embed)/error.tsx b/frontends/main/src/app/(embed)/error.tsx
index e986d520e5..121ff75b4f 100644
--- a/frontends/main/src/app/(embed)/error.tsx
+++ b/frontends/main/src/app/(embed)/error.tsx
@@ -10,7 +10,7 @@ const Error = ({ error }: { error: Error }) => {
     Sentry.captureException(error)
   }, [error])
 
-  return <FallbackErrorPage hideHomeButton />
+  return <FallbackErrorPage showHomeButton={false} />
 }
 
 export default Error

From eb726d17a855cc9a0624ad731319a2727169abca Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Fri, 15 May 2026 13:50:31 -0400
Subject: [PATCH 21/23] source-type gate from video embed page; mock API in
 page tests

---
 .../(embed)/video/[id]/embed/page.test.tsx    | 78 ++++---------------
 .../src/app/(embed)/video/[id]/embed/page.tsx | 30 +------
 2 files changed, 17 insertions(+), 91 deletions(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
index abbefe3654..042d50cdcc 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.test.tsx
@@ -1,12 +1,14 @@
 import { notFound } from "next/navigation"
-import { factories } from "api/test-utils"
+import { factories, setMockResponse, urls } from "api/test-utils"
 import type { VideoResource } from "api/v1"
-import { getQueryClient } from "@/app/getQueryClient"
 import Page from "./page"
 
-jest.mock("@/app/getQueryClient", () => ({
-  getQueryClient: jest.fn(),
-}))
+jest.mock("@/app/getQueryClient", () => {
+  const { makeBrowserQueryClient } = jest.requireActual("@/app/getQueryClient")
+  return {
+    getQueryClient: () => makeBrowserQueryClient({ maxRetries: 0 }),
+  }
+})
 
 jest.mock("@tanstack/react-query", () => ({
   ...jest.requireActual("@tanstack/react-query"),
@@ -18,18 +20,10 @@ jest.mock("@/app-pages/VideoEmbedPage/VideoEmbedPage", () => ({
   default: () => null,
 }))
 
-const mockGetQueryClient = jest.mocked(getQueryClient)
 const mockNotFound = jest.mocked(notFound)
 
 describe("video embed page.tsx server component", () => {
-  let mockFetchQueryOr404: jest.Mock
-
   beforeEach(() => {
-    mockFetchQueryOr404 = jest.fn()
-    mockGetQueryClient.mockReturnValue(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      { fetchQueryOr404: mockFetchQueryOr404 } as any,
-    )
     mockNotFound.mockImplementation(() => {
       throw new Error("NEXT_NOT_FOUND")
     })
@@ -58,7 +52,10 @@ describe("video embed page.tsx server component", () => {
 
   test("calls notFound when the resource is not a video", async () => {
     const course = factories.learningResources.course()
-    mockFetchQueryOr404.mockResolvedValue(course)
+    setMockResponse.get(
+      urls.learningResources.details({ id: course.id }),
+      course,
+    )
 
     await expect(
       Page({ params: Promise.resolve({ id: String(course.id) }) }),
@@ -66,56 +63,9 @@ describe("video embed page.tsx server component", () => {
     expect(notFound).toHaveBeenCalled()
   })
 
-  test("calls notFound when the video has no supported sources", async () => {
-    const video = factories.learningResources.video({
-      video: {
-        id: 1,
-        streaming_url: null,
-        duration: "PT5M",
-        caption_urls: [],
-        cover_image_url: null,
-      },
-      url: "https://example.com/not-youtube",
-      content_files: [],
-    }) as VideoResource
-    mockFetchQueryOr404.mockResolvedValue(video)
-
-    await expect(
-      Page({ params: Promise.resolve({ id: String(video.id) }) }),
-    ).rejects.toThrow("NEXT_NOT_FOUND")
-    expect(notFound).toHaveBeenCalled()
-  })
-
-  test("does not call notFound for a valid HLS video", async () => {
-    const video = factories.learningResources.video({
-      video: {
-        id: 1,
-        streaming_url: "https://cdn.example.com/video.m3u8",
-        duration: "PT5M",
-        caption_urls: [],
-        cover_image_url: null,
-      },
-    }) as VideoResource
-    mockFetchQueryOr404.mockResolvedValue(video)
-
-    await Page({ params: Promise.resolve({ id: String(video.id) }) })
-    expect(notFound).not.toHaveBeenCalled()
-  })
-
-  test("does not call notFound for a valid YouTube video via content_files", async () => {
-    const video = factories.learningResources.video({
-      video: {
-        id: 1,
-        streaming_url: null,
-        duration: "PT5M",
-        caption_urls: [],
-        cover_image_url: null,
-      },
-      content_files: [
-        factories.learningResources.contentFile({ youtube_id: "dQw4w9WgXcQ" }),
-      ],
-    }) as VideoResource
-    mockFetchQueryOr404.mockResolvedValue(video)
+  test("does not call notFound for a video resource", async () => {
+    const video = factories.learningResources.video() as VideoResource
+    setMockResponse.get(urls.learningResources.details({ id: video.id }), video)
 
     await Page({ params: Promise.resolve({ id: String(video.id) }) })
     expect(notFound).not.toHaveBeenCalled()
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 3be1fbb077..0423156742 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -3,7 +3,6 @@ import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
 import { learningResourceQueries } from "api/hooks/learningResources"
 import { getQueryClient } from "@/app/getQueryClient"
 import { notFound } from "next/navigation"
-import { resolveVideoSources } from "@/app-pages/VideoPlaylistCollectionPage/videoSources"
 import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
 import { VideoResourceResourceTypeEnum } from "api/v1"
 import type { VideoResource } from "api/v1"
@@ -13,8 +12,6 @@ import {
   MetadataNotFound,
 } from "@/common/metadata"
 
-const SUPPORTED_TYPES = ["application/x-mpegURL", "video/mp4", "video/youtube"]
-
 export const generateMetadata = ({
   params,
 }: {
@@ -33,22 +30,12 @@ export const generateMetadata = ({
         throw new MetadataNotFound()
       })
 
-    const isEmbeddableVideo =
-      resource?.resource_type === VideoResourceResourceTypeEnum.Video &&
-      SUPPORTED_TYPES.includes(
-        resolveVideoSources(
-          (resource).video?.streaming_url,
-          resource.url,
-          resource.content_files?.[0]?.youtube_id,
-        )[0]?.type ?? "",
-      )
-
-    if (!isEmbeddableVideo) {
+    if (resource?.resource_type !== VideoResourceResourceTypeEnum.Video) {
       throw new MetadataNotFound()
     }
 
     return standardizeMetadata({
-      title: resource.title
+      title: resource.title,
       robots: "noindex, nofollow",
       social: false,
     })
@@ -70,20 +57,9 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
     notFound()
   }
 
-  const videoResource = resource as VideoResource
-  const sources = resolveVideoSources(
-    videoResource.video?.streaming_url,
-    videoResource.url,
-    videoResource.content_files?.[0]?.youtube_id,
-  )
-
-  if (sources.length === 0 || !SUPPORTED_TYPES.includes(sources[0].type)) {
-    notFound()
-  }
-
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <VideoEmbedPage videoResource={videoResource} />
+      <VideoEmbedPage videoResource={resource as VideoResource} />
     </HydrationBoundary>
   )
 }

From 8ed033d2fd7ea20a4f3f76703fb0b722bc72b080 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Fri, 15 May 2026 14:37:29 -0400
Subject: [PATCH 22/23] move Appzi script to (site)/layout to exclude embed
 pages

---
 frontends/main/src/app/(embed)/video/[id]/embed/page.tsx | 3 +--
 frontends/main/src/app/(site)/layout.tsx                 | 4 ++++
 frontends/main/src/app/layout.tsx                        | 3 ---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 0423156742..5a01d1a864 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -5,7 +5,6 @@ import { getQueryClient } from "@/app/getQueryClient"
 import { notFound } from "next/navigation"
 import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
 import { VideoResourceResourceTypeEnum } from "api/v1"
-import type { VideoResource } from "api/v1"
 import {
   safeGenerateMetadata,
   standardizeMetadata,
@@ -59,7 +58,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <VideoEmbedPage videoResource={resource as VideoResource} />
+      <VideoEmbedPage videoId={videoId} />
     </HydrationBoundary>
   )
 }
diff --git a/frontends/main/src/app/(site)/layout.tsx b/frontends/main/src/app/(site)/layout.tsx
index 633486b373..c99f1e21dd 100644
--- a/frontends/main/src/app/(site)/layout.tsx
+++ b/frontends/main/src/app/(site)/layout.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import Script from "next/script"
 import Header from "@/page-components/Header/Header"
 import Footer from "@/page-components/Footer/Footer"
 import { PageWrapper, PageWrapperInner } from "@/app/styled"
@@ -16,6 +17,9 @@ export default function SiteLayout({
         <PageWrapperInner>{children}</PageWrapperInner>
         <Footer />
       </PageWrapper>
+      {process.env.NEXT_PUBLIC_APPZI_URL ? (
+        <Script async src={process.env.NEXT_PUBLIC_APPZI_URL} />
+      ) : null}
     </>
   )
 }
diff --git a/frontends/main/src/app/layout.tsx b/frontends/main/src/app/layout.tsx
index 8ed52b0de7..de5a133fc4 100644
--- a/frontends/main/src/app/layout.tsx
+++ b/frontends/main/src/app/layout.tsx
@@ -113,9 +113,6 @@ j=d.createElement(s),dl=l!=='dataLayer'?'&l='+l:'';j.async=true;j.src=
           </noscript>
         ) : null}
         <Providers>{children}</Providers>
-        {process.env.NEXT_PUBLIC_APPZI_URL ? (
-          <Script async src={process.env.NEXT_PUBLIC_APPZI_URL} />
-        ) : null}
         {process.env.NEXT_PUBLIC_HUBSPOT_PORTAL_ID ? (
           <Script
             id="hs-script-loader"

From 0a8a9a004717524ec6d90b6e156c286f1bee7969 Mon Sep 17 00:00:00 2001
From: Danielle Frappier <dfrapp@mit.edu>
Date: Fri, 15 May 2026 14:47:45 -0400
Subject: [PATCH 23/23] pass VideoResource to VideoEmbedPage instead of
 refetching by id

---
 .../VideoEmbedPage/VideoEmbedPage.test.tsx       | 15 ++++-----------
 .../app-pages/VideoEmbedPage/VideoEmbedPage.tsx  | 16 ++++++----------
 .../src/app/(embed)/video/[id]/embed/page.tsx    |  4 ++--
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
index db4e94e994..3bb87fd94d 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.test.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { setMockResponse, urls, factories } from "api/test-utils"
+import { factories } from "api/test-utils"
 import { renderWithProviders, screen } from "@/test-utils"
 import VideoEmbedPage from "./VideoEmbedPage"
 import type { VideoResource } from "api/v1"
@@ -32,16 +32,11 @@ const makeVideo = (overrides: Partial<VideoResource> = {}): VideoResource =>
     ...overrides,
   }) as VideoResource
 
-const setupVideoApi = (video: VideoResource) => {
-  setMockResponse.get(urls.learningResources.details({ id: video.id }), video)
-}
-
 describe("VideoEmbedPage", () => {
   test("renders VideoJsPlayer for a video with a streaming URL", async () => {
     const video = makeVideo()
-    setupVideoApi(video)
 
-    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+    renderWithProviders(<VideoEmbedPage videoResource={video} />)
 
     const player = await screen.findByTestId("video-js-player")
     expect(player).toBeInTheDocument()
@@ -60,9 +55,8 @@ describe("VideoEmbedPage", () => {
         cover_image_url: null,
       },
     })
-    setupVideoApi(video)
 
-    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+    renderWithProviders(<VideoEmbedPage videoResource={video} />)
 
     const player = await screen.findByTestId("video-js-player")
     const sources = JSON.parse(player.getAttribute("data-sources") ?? "[]")
@@ -82,9 +76,8 @@ describe("VideoEmbedPage", () => {
         factories.learningResources.contentFile({ youtube_id: "dQw4w9WgXcQ" }),
       ],
     })
-    setupVideoApi(video)
 
-    renderWithProviders(<VideoEmbedPage videoId={video.id} />)
+    renderWithProviders(<VideoEmbedPage videoResource={video} />)
 
     const iframe = await screen.findByTitle(/^Video: /)
     expect(iframe).toHaveAttribute(
diff --git a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
index ad10e41803..8452065fa6 100644
--- a/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
+++ b/frontends/main/src/app-pages/VideoEmbedPage/VideoEmbedPage.tsx
@@ -2,7 +2,6 @@
 
 import React from "react"
 import { styled } from "ol-components"
-import { useLearningResourcesDetail } from "api/hooks/learningResources"
 import VideoResourcePlayer from "@/app-pages/VideoPlaylistCollectionPage/VideoResourcePlayer"
 import type { VideoResource } from "api/v1"
 
@@ -13,20 +12,17 @@ const EmbedPlayer = styled(VideoResourcePlayer)({
 })
 
 type VideoEmbedPageProps = {
-  videoId: number
+  videoResource: VideoResource
 }
 
-const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => {
-  const { data: resource, isLoading } = useLearningResourcesDetail(videoId)
-  const video = resource as VideoResource | undefined
-
-  const videoTitleLabel = video?.title?.trim() || "Untitled video"
+const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoResource }) => {
+  const videoTitleLabel = videoResource.title?.trim() || "Untitled video"
 
   return (
     <EmbedPlayer
-      video={video}
-      videoId={videoId}
-      isLoading={isLoading}
+      video={videoResource}
+      videoId={videoResource.id}
+      isLoading={false}
       videoTitleLabel={videoTitleLabel}
       videoThumbnailAlt={`Video thumbnail for ${videoTitleLabel}`}
     />
diff --git a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
index 5a01d1a864..84d806ce7b 100644
--- a/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
+++ b/frontends/main/src/app/(embed)/video/[id]/embed/page.tsx
@@ -4,7 +4,7 @@ import { learningResourceQueries } from "api/hooks/learningResources"
 import { getQueryClient } from "@/app/getQueryClient"
 import { notFound } from "next/navigation"
 import VideoEmbedPage from "@/app-pages/VideoEmbedPage/VideoEmbedPage"
-import { VideoResourceResourceTypeEnum } from "api/v1"
+import { VideoResourceResourceTypeEnum, type VideoResource } from "api/v1"
 import {
   safeGenerateMetadata,
   standardizeMetadata,
@@ -58,7 +58,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <VideoEmbedPage videoId={videoId} />
+      <VideoEmbedPage videoResource={resource as VideoResource} />
     </HydrationBoundary>
   )
 }