feat: add video embed page and route group restructure

[daniellefrappier18]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/11123

Description (What does it do?)

• Adds a /video/[id]/embed route under a new (embed) route group for embedding individual OCW videos in iframes. The page validates the resource is a playable video (HLS, MP4, or YouTube) before rendering.
• Removes the VideoPlaylistPage feature flag entirely, cleaning it up from all existing pages that previously gated on it.
• Restructures the app router by introducing a (site) route group that wraps all existing pages with the site header, footer, and global styles, keeping the root layout minimal so the embed route can opt out of the site UI.
• Adds (embed)/not-found.tsx for iframe-appropriate 404s (no home button) and (embed)/error.tsx for non-404 runtime errors, both without site UI
• Adds (site)/[...unmatched]/page.tsx catch-all so unmatched site routes (e.g. /bad-route) correctly resolve to (site)/not-found.tsx with header/footer.
• Adds generateMetadata to the embed page so the iframe has a meaningful <title> and is marked noindex; falls back to "Video" for missing or non-embeddable resources.

Screenshots (if appropriate):

• Desktop screenshots
• Mobile width screenshots

Video Embed Page with valid id (not YouTube)
http://open.odl.local:8062/video/115203/embed

Video Embed 404 Page with NON valid id (not YouTube)
http://open.odl.local:8062/video/000/embed

Video Embed Page with a valid YouTube id

Video Embed Page with non-404 error
I just added throw new Error("test error") temporarily to VideoEmbedPage.tsx to simulate

const VideoEmbedPage: React.FC<VideoEmbedPageProps> = ({ videoId }) => { throw new Error("test error") // ← here, remove after testing const { data: resource, isLoading } = useLearningResourcesDetail(videoId) ...

Regular non video embed page that doesn't exist
http://open.odl.local:8062/this-does-not-exist

Existing site route page
http://open.odl.local:8062/search?q=

How can this be tested?

• Navigate to a valid video embed URL (e.g. /video/[id]/embed). The video player renders full-viewport with no with no header/footer and the tab title is that of the video plus the | MIT Learn appendix
• Navigate to /video/000/embed (nonexistent ID). The embed 404 page renders with no header/footer or Home button, and the tab title is "Not Found | MIT Learn"
• Navigate to /this-does-not-exist or another page that will 404. It shows custom 404 page with site header and footer and have the title "Not Found | MIT Learn"
• Navigate to any existing site route (e.g. /search) — header and footer still present, no regression
• Trigger a non-404 error on an embed page (e.g. temporarily throw new Error("test") at the top of VideoEmbedPage.tsx). The error page renders full-viewport with no header/footer and no Home button, and the tab title is that of the video plus the | MIT Learn appendix

Additional Context

[github-actions]

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

Copilot reviewed 20 out of 67 changed files in this pull request and generated no new comments.

[ChristopherChudzicki]

This is working well! I tried out some iframes with the embed page, too:

I left some comments and suggestions. Main requested change is around the appzi link.

[ChristopherChudzicki]

I was confused why this was removed.

For posterity... error.tsx becomes an ErrorBoundary, and error boundaries are always client components. https://nextjs.org/docs/app/getting-started/error-handling#nested-error-boundaries

And client components can't set metadata, so this was useless all along.

not-found.tsx is NOT converted into an error boundary by nextjs, it's explicitly triggered via notFound or missng routes on server render, so it's different.

[daniellefrappier18]

This appears to be dead code so I was just cleaning it up. Is there a reason to keep this that I'm not aware of?