How to embed YouTube Videos in MDX Using Next.js

Let's learn how to embed YouTube videos in your MDX Next.js blog with a Custom Component.

I store all code related to markdown in src/components/mdx folder.
Let's create a new file called youtube.tsx in that folder.

// src/components/mdx/youtube.tsx
 
export default function YouTube({ id }: { id: string }) {
  return (
    <div className='border-2 border-black'>
      <iframe
        className='aspect-video w-full'
        src={`https://www.youtube.com/embed/${id}`}
        title='YouTube Video Player'
      />
    </div>
  );
}

Let's understand the above code:

• Takes a required single prop id which is the YouTube video ID.
• Returns a div with a border and an iframe that embeds the YouTube video.
• The IFrame URL is constructed using the video ID.

Next, we need to add the YouTube component to the MDX Provider.
I am using Contentlayer for my blog, so I will use the getMDXComponent function to create the MDX component.

import { getMDXComponent } from 'next-contentlayer2/hooks';
import YouTube from './youtube'; 
 
interface MarkdownProps { code: string }
 
const Mdx = ({ code }: MarkdownProps) => {
  const MDXContent = getMDXComponent(code);
  return (
    <article className='prose mx-auto w-full'>
      <MDXContent components={{YouTube}} />
    </article>
  );
};
 
export default Mdx;

Breakdown of the above code:

• We import the newly created YouTube component.
• We create an MDX component using the getMDXComponent function.
• We pass the YouTube component to the MDXContent component.

How you use the component may differ based on your MDX setup.
Check below to find documentation for your setup:

• @next/mdx
• next-mdx-remote
• mdx-bundler

Now you can use the YouTube component in your MDX files.

<YouTube id='dQw4w9WgXcQ' />

Above code will create the following result: