DR-7410 - DOCS | create and use youtube component + add videos ids to docs

apps/docs/content/docs/guides/integrations/supabase-accelerate.mdx

@@ -13,6 +13,8 @@ This guides teaches you how to add connection pooling to a PostgreSQL database h
 
 Prisma Accelerate is a robust and mature connection pooler enabling your database to function properly during traffic spikes and high load scenarios. Check out this [video](https://www.youtube.com/watch?v=cnL75if6Aq0) demonstrating how it performs in a load test or [learn why connection pooling is important](https://www.prisma.io/blog/saving-black-friday-with-connection-pooling).
 
+<Youtube videoId="cVB7Bv0T16M" title="Set up Supabase with Prisma Accelerate connection pooling" />
+
 ## Prerequisites
 
 To successfully complete this guide, you need **a connection string for a PostgreSQL instance hosted on Supabase**. It typically looks similar to this:

apps/docs/content/docs/guides/runtimes/bun.mdx

@@ -11,6 +11,8 @@ metaDescription: Learn how to use Prisma ORM in a Bun application with Prisma Po
 
 [Bun](https://bun.sh) is a fast JavaScript runtime that includes a bundler, test runner, and package manager. In this guide, you will set up a Bun project with Prisma ORM and a Prisma Postgres database. You will create a simple HTTP server and build a Bun executable for deployment.
 
+<Youtube videoId="gE6l4eX0v_I" title="How to use Prisma ORM with Bun and Prisma Postgres" />
+
 ## Prerequisites
 
 - [Bun](https://bun.sh/docs/installation) installed in your system

apps/docs/content/docs/guides/runtimes/deno.mdx

@@ -10,6 +10,8 @@ metaDescription: Learn how to use Prisma ORM in a Deno application with Prisma P
 
 [Deno](https://deno.com) is a secure JavaScript and TypeScript runtime built on V8 with built-in TypeScript support, a permissions system, and web-standard APIs. In this guide, you will set up a Deno project with Prisma ORM and a Prisma Postgres database. You will create a simple HTTP server that reads from the database and returns the results.
 
+<Youtube videoId="hAL2J3yQf7I" title="How to use Prisma ORM with Deno and Prisma Postgres" />
+
 ## Prerequisites
 
 - [Deno](https://docs.deno.com/runtime/#install-deno) v2.0 or later installed on your system

apps/docs/content/docs/orm/prisma-migrate/workflows/seeding.mdx

@@ -11,6 +11,12 @@ Seeding allows you to consistently re-create the same data in your database and
 - Populate your database with data that is required for your application to start, such as a default language or currency.
 - Provide basic data for validating and using your application in a development environment. This is particularly useful if you are using Prisma Migrate, which sometimes requires resetting your development database.
 
+<Accordions>
+  <Accordion title="Watch video: Seeding your database">
+    <Youtube videoId="mulzjQ4pZaA" title="How to seed your database with Prisma ORM" />
+  </Accordion>
+</Accordions>
+
 ## How to seed your database in Prisma ORM
 
 Prisma ORM's integrated seeding functionality expects a command in the `"seed"` key in the `migrations` object of your `prisma.config.ts`. This can be any command, `prisma db seed` will just execute it. In this guide and as a default, we recommend writing a seed script inside your project's `prisma/` folder and starting it with the command.

apps/docs/content/docs/orm/prisma-schema/overview/location.mdx

@@ -48,6 +48,15 @@ Run prisma generate to generate Prisma Client.
 
 ## Multi-file Prisma schema
 
+<Accordions>
+  <Accordion title="Watch video: Multi-file Prisma schema">
+    <Youtube
+      videoId="yGgoP2KK8Bo"
+      title="How to organize and use a multi-file Prisma schema"
+    />
+  </Accordion>
+</Accordions>
+
 If you prefer splitting your Prisma schema into multiple files, you can have a setup that looks as follows:
 
 ```
@@ -60,7 +69,6 @@ prisma/
 └── schema.prisma
 ```
 
-
 ### Usage
 
 When using a multi-file Prisma schema, you must always explicitly specify the location of the directory that contains your schema files (including the main `schema.prisma` file with your `generator` block).

apps/docs/src/components/youtube.tsx

@@ -0,0 +1,19 @@
+type YoutubeProps = {
+  videoId: string;
+  title?: string;
+};
+
+export const Youtube = ({ videoId, title = "YouTube video player" }: YoutubeProps) => {
+  return (
+    <iframe
+      src={`https://www.youtube.com/embed/${videoId}`}
+      width="100%"
+      style={{ aspectRatio: 16 / 9 }}
+      loading="lazy"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      title={title}
+    />
+  );
+};

apps/docs/src/mdx-components.tsx

@@ -1,5 +1,6 @@
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import { APIPage } from "@/components/api-page";
+import { Youtube } from "@/components/youtube";
 import { withDocsBasePath } from "@/lib/urls";
 
 import type { MDXComponents } from "mdx/types";
@@ -56,11 +57,9 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     Accordion,
     Accordions,
     APIPage,
+    Youtube,
     img: (props: any) => (
-      <ImageZoom
-        {...(props as any)}
-        src={withDocsBasePathForImageSrc((props as any).src)}
-      />
+      <ImageZoom {...(props as any)} src={withDocsBasePathForImageSrc((props as any).src)} />
     ),
     input: (props: any) => <Input {...props} />,
   };