From 27e2ef575ffe752d6d53a1ec934545e6ac9258a2 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Thu, 4 Dec 2025 10:07:47 -0300
Subject: [PATCH] feat: add "portrait" prop for YouTube embeds

Handles YouTube Shorts orientation
---
 src/components/YouTube.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/YouTube.tsx b/src/components/YouTube.tsx
index 6649679ee0b..c4fa72925a3 100644
--- a/src/components/YouTube.tsx
+++ b/src/components/YouTube.tsx
@@ -14,6 +14,7 @@ import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"
  * @param {start} Start time of the video in seconds
  * URLs come in format: https://www.youtube.com/watch?v=<id>&t=<start> or: https://www.youtube.com/embed/<id>?start=<start>
  * e.g., For https://www.youtube.com/watch?v=H-O3r2YMWJ4&t=123 the `start` is 123 (which means 123 seconds)
+ * @param {portrait} boolean used for YouTube Shorts using portrait orientation (default = false)
  * @returns Embedded YouTube video component
  */
 
@@ -22,22 +23,30 @@ type YouTubeProps = {
   start?: string
   title?: string
   className?: string
+  portrait?: boolean
 } & React.ComponentProps<typeof LiteYouTubeEmbed>
 
 const YouTube = ({
   id,
   start = "0",
   title = "YouTube",
+  portrait,
   className,
   ...props
 }: YouTubeProps) => {
   const params = new URLSearchParams()
   ;+start > 0 && params.set("start", start)
   return (
-    <figure className={cn("my-8 max-w-[560px]", className)}>
+    <figure
+      className={cn(
+        "my-8 max-w-[560px]",
+        portrait && "aspect-[9/16] max-h-[420px]",
+        className
+      )}
+    >
       <LiteYouTubeEmbed
-        aspectHeight={9}
-        aspectWidth={16}
+        aspectHeight={portrait ? 16 : 9}
+        aspectWidth={portrait ? 9 : 16}
         id={id}
         title={title}
         params={params.toString()}