YouTube embeds in Astro MDX

One of the things I’ll be doing a lot with this blog is creating posts that have some video content. This will either be me sharing fun and useful things I’ve found online, cool clips from games when I’ve been streaming, or cat videos.

Today I was experimenting with recording portrait video content in OBS Studio using my newly-acquired DJI Osmo Pocket 3. I figured after uploading as a YouTube “short” why not try sharing that on my blog. While I’m at it I can experiment with embedding YouTube iframes and tackling any styling issues that may come up.

My thought process was that instead of just dumping raw iframes into my blog, I’ll make some sort of reusable Astro component that will make it cleaner, more consistent and easier to change if I need to tweak all the videos at the same time.

Landscape video

This is a video I recorded playing Returnal one night when not streaming. I wanted to see what the recording would look like in 1440p as opposed to the 1080p I usually stream in. Additionally it benefits from not having my monotone drawl all over the action.

Portrait video

This is a video I recorded tonight opening a booster pack of Pokémon TCG: Scarlet & Violet-Paradox Rift, with a little bit of editing done in DaVinci Resolve to keep it short and sweet. My wife bought me a whole bunch of Pokémon cards this Christmas, and rather than just enjoy opening them myself, why not share that with the world.

Astro component

Here’s a code snippet of the component I ended up building to make embedding YouTube videos into my future blog posts easier. I’m using Tailwind on this site, so there’s some classes and logic which will make sense when you understand that context.

---
const {
  videoId = 'dQw4w9WgXcQ',
  title = 'YouTube video player',
  isShort = false,
} = Astro.props;
const src = `https://www.youtube.com/embed/${videoId}`;
---

<iframe
  width={isShort ? 664 : 560}
  height={isShort ? 1181 : 315}
  src={src}
  title={title}
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
  class:list={[
    { 'aspect-video': !isShort },
    { 'aspect-9/16': isShort },
    'h-auto',
    'w-full',
    'border-0',
  ]}></iframe>

To use it for a portrait video, I just need to pass in the video ID and title as props:

<YoutubeEmbed videoId="PFS6qGuZ9MA" title="Returnal - Stage 4 Ether run" />

And for a short, I need the same props and an additional isShort attribute to trigger the logic in the component that changes the dimensions and aspect ratio.

<YoutubeEmbed
  videoId="RlSg_RNMWuU"
  title="Pokémon TCG - Scarlet and Violet: Paradox RIFT"
  isShort
/>

Like and subscribe

That’s about all for this blog post then, thanks for reading/watching. Feel free to subscribe to my YouTube channel if you like the vids. Have a goodun 👋