Pursuit of Loot logo, to the homepage

šŸ“… Posted on in Astro. Tagged with: Astro , YouTube , MDX , Returnal , PokĆ©mon TCG

YouTube embeds in Astro MDX

A screenshot of YouTube's embed code

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 šŸ‘‹

. . .

Did you enjoy this post? If you didn't, please let me know. If you did, feel free to share it using the icons below:

Next article
Twitch recap - January 2025
8 Feb 2025 - 2:46 pm

Previous article
Nendoroid Guts
26 Jul 2024 - 2:44 pm

Back to top Back to top Back to top