~ 2 min read

Add Responsive YouTube Videos to Astro.JS MDX

Lets see how easy is to add a responsive YouTube video to Astro.js

I am using Astro.js to host this blog on Cloudflare Pages and an important part of the blog is to be responsive and be able to add YouTube videos to the posts.

In case you want to deploy your blog on Astro.js and Cloudflare Pages you can check this tutorial:How To Deploy An Astro.JS Blog On Cloudflare

With the new MDX move done by Astro you can easily embed YouTube videos to MDX files by installing an extension, here we will see exactly how. We are going to use astro-embed extension for this. With it, you can not only embed YouTube videos but you will also be able to embed Vimeo or Twitter.

Add Responsive YouTube Videos to Astro.JS MDX

1. Install astro-embed

In case you don’t have it installed in your project you can install it with:

npm i astro-embed

2. Call astro-embed in MDX

With it installed you can now call it not only in the MDX files for your blog but you can call it also on the .astro files by adding the below in the files:

import { Tweet, Vimeo, YouTube } from 'astro-embed';

If you only have YouTube in the MDX file you can call only YouTube. The Row needs to be added under the MDX header like the below example:

---
publishDate: 'Sep 14 2022'
title: 'Monitor CPU Usage and Send Email Alerts in Linux'
description: "Let's see how we can monitor CPU usage on a server and receive emails."
excerpt: "Let's see how we can monitor CPU usage on a server and receive emails."
image: '~/assets/images/cpu_monitoring.jpeg'
category: 'vps'
tags: [linux, tutorials]
---

import { YouTube } from 'astro-embed';

;

3. Add the video to the body

Now you should be able to use the video where you want in your MDX file. To add it you just add the link to it below:

<YouTube id="https://youtu.be/NkShQ1wwiCg" />

And it will look like below where you can follow the tutorial for this article:

Conclusions

The embed is responsive and fast as it will not use the iframe for this. Usually, when you add an iframe video from youtube to the article the speed score is going down a lot because of the scripts that need to be loaded. With this embed, it will not load all the YouTube scripts and will do so only on click. Below is the score:

YouTube Speed score