diff --git a/src/components/ResourcesBySelector.astro b/src/components/ResourcesBySelector.astro
index ea012498932cee..6cc9830046d5ad 100644
--- a/src/components/ResourcesBySelector.astro
+++ b/src/components/ResourcesBySelector.astro
@@ -3,27 +3,43 @@ import { z } from "astro:schema";
 import { getCollection, type CollectionEntry } from "astro:content";
 import ResourcesBySelectorReact from "./ResourcesBySelector";
 
-type Props = z.infer<typeof props>;
-type Frontmatter = keyof CollectionEntry<"docs">["data"];
+type Props = z.input<typeof props>;
+
+type DocsData = keyof CollectionEntry<"docs">["data"];
+type VideosData = keyof CollectionEntry<"stream">["data"];
+
+type ResourcesData = DocsData | VideosData;
 
 const props = z.object({
 	tags: z.string().array().optional(),
 	types: z.string().array(),
 	products: z.string().array().optional(),
 	directory: z.string().optional(),
-	filterables: z.custom<Frontmatter>().array().optional(),
+	filterables: z.custom<ResourcesData>().array().optional(),
+	columns: z.union([z.literal(2), z.literal(3)]).default(2),
 });
 
-const { tags, types, products, directory, filterables } = props.parse(
+const { tags, types, products, directory, filterables, columns } = props.parse(
 	Astro.props,
 );
 
-const resources = await getCollection("docs", ({ id, data }) => {
+const docs = await getCollection("docs");
+const videos = await getCollection("stream");
+
+const resources: Array<CollectionEntry<"docs"> | CollectionEntry<"stream">> = [
+	...docs,
+	...videos,
+].filter(({ id, collection, data }) => {
+	const type = "pcx_content_type" in data ? data.pcx_content_type : collection;
 	return (
-		types.includes(data.pcx_content_type ?? "") &&
+		types.includes(type ?? "") &&
 		(directory ? id.startsWith(directory) : true) &&
 		(tags ? data.tags?.some((v: string) => tags.includes(v)) : true) &&
-		(products ? data.products?.some((v: string) => products.includes(v)) : true)
+		(products
+			? data.products?.some((v) =>
+					products.includes(typeof v === "object" ? v.id : v),
+				)
+			: true)
 	);
 });
 
@@ -32,7 +48,7 @@ const facets = resources.reduce(
 		if (!filterables) return acc;
 
 		for (const filter of filterables) {
-			const val = page.data[filter];
+			const val = page.data[filter as keyof typeof page.data];
 			if (val) {
 				if (Array.isArray(val) && val.every((v) => typeof v === "string")) {
 					acc[filter] = [...new Set([...(acc[filter] || []), ...val])];
@@ -53,6 +69,7 @@ const facets = resources.reduce(
 		resources={resources}
 		facets={facets}
 		filters={filterables}
+		columns={columns}
 		client:load
 	/>
 </div>
diff --git a/src/components/ResourcesBySelector.tsx b/src/components/ResourcesBySelector.tsx
index 8aaddcd99bd38b..870f9d5c92ab78 100644
--- a/src/components/ResourcesBySelector.tsx
+++ b/src/components/ResourcesBySelector.tsx
@@ -2,18 +2,23 @@ import { useEffect, useState } from "react";
 import ReactSelect from "./ReactSelect";
 import type { CollectionEntry } from "astro:content";
 
-type Frontmatter = keyof CollectionEntry<"docs">["data"];
+type DocsData = keyof CollectionEntry<"docs">["data"];
+type VideosData = keyof CollectionEntry<"stream">["data"];
+
+type ResourcesData = DocsData | VideosData;
 
 interface Props {
-	resources: CollectionEntry<"docs">[];
+	resources: Array<CollectionEntry<"docs"> | CollectionEntry<"stream">>;
 	facets: Record<string, string[]>;
-	filters?: Frontmatter[];
+	filters?: ResourcesData[];
+	columns: number;
 }
 
 export default function ResourcesBySelector({
 	resources,
 	facets,
 	filters,
+	columns,
 }: Props) {
 	const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
 
@@ -34,7 +39,7 @@ export default function ResourcesBySelector({
 
 		const filterableValues: string[] = [];
 		for (const filter of filters) {
-			const val = resource.data[filter];
+			const val = resource.data[filter as keyof typeof resource.data];
 			if (val) {
 				if (Array.isArray(val) && val.every((v) => typeof v === "string")) {
 					filterableValues.push(...val);
@@ -75,21 +80,30 @@ export default function ResourcesBySelector({
 				</div>
 			)}
 
-			<div className="grid grid-cols-2 gap-4">
-				{visibleResources.map((page) => (
-					<a
-						key={page.id}
-						href={`/${page.id}/`}
-						className="flex flex-col gap-2 rounded-sm border border-solid border-gray-200 p-6 text-black no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
-					>
-						<p className="decoration-accent underline decoration-2 underline-offset-4">
-							{page.data.title}
-						</p>
-						<span className="line-clamp-3" title={page.data.description}>
-							{page.data.description}
-						</span>
-					</a>
-				))}
+			<div
+				className={`grid ${columns === 2 ? "grid-cols-2" : "grid-cols-3"} gap-4`}
+			>
+				{visibleResources.map((page) => {
+					const href =
+						page.collection === "stream"
+							? `/videos/${page.data.url}/`
+							: `/${page.id}/`;
+
+					return (
+						<a
+							key={page.id}
+							href={href}
+							className="flex flex-col gap-2 rounded-sm border border-solid border-gray-200 p-6 text-black no-underline hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+						>
+							<p className="decoration-accent underline decoration-2 underline-offset-4">
+								{page.data.title}
+							</p>
+							<span className="line-clamp-3" title={page.data.description}>
+								{page.data.description}
+							</span>
+						</a>
+					);
+				})}
 			</div>
 		</div>
 	);
diff --git a/src/content/stream/example-video/index.yaml b/src/content/stream/example-video/index.yaml
deleted file mode 100644
index 0175d8c076c247..00000000000000
--- a/src/content/stream/example-video/index.yaml
+++ /dev/null
@@ -1,13 +0,0 @@
-id: streamid
-url: example-video
-title: Example Video
-description: A Super cool video
-products:
-  - workers
-  - workers-ai
-transcript: ./transcript.vtt
-chapters:
-  00:01: Chapter 1
-  00:02: Chapter 2
-thumbnail:
-  url: https://example.com/foo.png
diff --git a/src/content/stream/example-video/transcript.vtt b/src/content/stream/example-video/transcript.vtt
deleted file mode 100644
index 05a56bd38af02e..00000000000000
--- a/src/content/stream/example-video/transcript.vtt
+++ /dev/null
@@ -1,40 +0,0 @@
-WEBVTT
-
-00:11.000 --> 00:13.000
-<v Roger Bingham>We are in New York City
-
-00:13.000 --> 00:16.000
-<v Roger Bingham>We're actually at the Lucern Hotel, just down the street
-
-00:16.000 --> 00:18.000
-<v Roger Bingham>from the American Museum of Natural History
-
-00:18.000 --> 00:20.000
-<v Roger Bingham>And with me is Neil deGrasse Tyson
-
-00:20.000 --> 00:22.000
-<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium
-
-00:22.000 --> 00:24.000
-<v Roger Bingham>at the AMNH.
-
-00:24.000 --> 00:26.000
-<v Roger Bingham>Thank you for walking down here.
-
-00:27.000 --> 00:30.000
-<v Roger Bingham>And I want to do a follow-up on the last conversation we did.
-
-00:30.000 --> 00:31.500 align:right size:50%
-<v Roger Bingham>When we e-mailed—
-
-00:30.500 --> 00:32.500 align:left size:50%
-<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?
-
-00:32.000 --> 00:35.500 align:right size:50%
-<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
-
-00:32.500 --> 00:33.500 align:left size:50%
-<v Neil deGrasse Tyson><i>Laughs</i>
-
-00:35.500 --> 00:38.000
-<v Roger Bingham>You know I'm so excited my glasses are falling off here.
\ No newline at end of file
diff --git a/src/pages/videos/[...slug].astro b/src/pages/videos/[...slug].astro
new file mode 100644
index 00000000000000..2c2260a7fe645e
--- /dev/null
+++ b/src/pages/videos/[...slug].astro
@@ -0,0 +1,42 @@
+---
+import type { GetStaticPaths } from "astro";
+import { getCollection } from "astro:content";
+import StarlightPage, {
+	type StarlightPageProps,
+} from "@astrojs/starlight/components/StarlightPage.astro";
+
+import { Stream, Width } from "~/components";
+
+export const getStaticPaths = (async () => {
+	const entries = await getCollection("stream");
+
+	return entries.map(({ data }) => {
+		return {
+			params: {
+				slug: data.url,
+			},
+			props: {
+				entry: data,
+			},
+		};
+	});
+}) satisfies GetStaticPaths;
+
+const { entry } = Astro.props;
+
+const props = {
+	frontmatter: {
+		title: entry.title,
+		description: entry.description,
+		template: "splash",
+		noindex: true,
+	},
+	hideBreadcrumbs: true,
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+	<Width size="large" center={true}>
+		<Stream id={entry.id} title={entry.title} chapters={entry.chapters} />
+	</Width>
+</StarlightPage>
diff --git a/src/pages/videos/index.astro b/src/pages/videos/index.astro
new file mode 100644
index 00000000000000..874f5525a56c19
--- /dev/null
+++ b/src/pages/videos/index.astro
@@ -0,0 +1,20 @@
+---
+import StarlightPage, {
+	type StarlightPageProps,
+} from "@astrojs/starlight/components/StarlightPage.astro";
+
+import { ResourcesBySelector } from "~/components";
+
+const props = {
+	frontmatter: {
+		title: "Videos",
+		template: "splash",
+		noindex: true,
+	},
+	hideBreadcrumbs: true,
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+	<ResourcesBySelector types={["stream"]} columns={3} />
+</StarlightPage>