How to embed YouTube Videos in MDX Using Next.js

YouTube Video Embedded in MDX Page using Next.Js

In this tutorial I'll show you how to setup a YouTube Video Embed Component (in Next.Js) for your MDX pages that will allow you to share your videos across your Markdown Pages.


For this tutorial, I expect you've already got MDX setup inside your Next.Js application. If you haven't done this yet then follow this tutorial:

MDX Next.Js Blog Tutorial

1) YouTube Video Embed - MDX Component

The first thing we need to do is to create our new component. Inside my application this will go in the components/mdx folder in a file called YouTube.tsx.

export default function YouTube ({ id } : { id : string }){
  return (
        className="aspect-video w-full"
        src={"https://www.youtube.com/embed/" + id}
        title="YouTube Video Player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

Let's take a look at the different parts of this:

2) Import your MDX Component

Before we can use this component on our page, we first need to add it to our MDX components. For this tutorial, I'm using next-mdx-remote, however this is very similar for all MDX packages:

First import our YouTube component:

// app/blog/[slug]/page.tsx
import YouTube from '@/components/mdx/YouTube'

Then add the component to our mdx components:

// app/blog/[slug]/page.tsx
<MDXRemote source={props.content} components={{Button, YouTube}}/>

3) Embed YouTube Videos in your MDX Pages

Now that the component is setup, we can add YouTube videos to our mdx blogs like this:

// blogs/first-blog.mdx

<YouTube id="gCbGmAFqLoU"/>

Make sure you change the ID to that of the specific YouTube video you want to embed. With that complete, your page will have a YouTube video embedded directly within it like this video below:

It's as simple as that; you now have YouTube videos embedded in your MDX pages with your Next.Js application.

Find out more about additional YouTube Embed features such as Autoplay. Or learn how to Setup your own MDX Next.Js Blog.