š Posted on in Astro. Tagged with: Astro , YouTube , MDX , Returnal , PokĆ©mon TCG
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 š