💄V2 Card component - added option to embed Youtube videos inside the card carousel

components/blocks/cardCarousel/cardCarousel/cardCarouselSchema.tsx

@@ -306,6 +306,13 @@ export const CardCarouselSchema: Template = {
             component: GUIDGeneratorComponent,
           },
         },
+        {
+          type: "string",
+          label: "Embed",
+          name: "embed",
+          description:
+            "The YouTube video ID to embed (https://www.youtube.com/watch?v=[embed]).",
+        },
         {
           type: "image",
           label: "Image",

components/blocks/cardCarousel/layout/card.tsx

@@ -1,5 +1,6 @@
 import { ListItem } from "@/components/blocksSubtemplates/listItem";
 import { PillGroup } from "@/components/blocksSubtemplates/pillGroup";
+import { YouTubeEmbed } from "@/components/embeds/youtubeEmbed";
 import Image from "next/image";
 import { useState } from "react";
 import { tinaField } from "tinacms/dist/react";
@@ -24,23 +25,27 @@ const Card = ({ data, placeholder }: CardProps) => {
         })?.classes
       }`}
     >
-      {(data.image || placeholder) && (
-        <div
-          className="relative mb-2 min-h-36 w-full overflow-hidden rounded-md"
-          data-tina-field={tinaField(data, "image")}
-        >
-          <Image
-            src={
-              usePlaceholder
-                ? placeholderImage
-                : (data.image ?? placeholderImage)
-            }
-            onError={() => setUsePlaceholder(true)}
-            alt={data.altText ?? "Card Image"}
-            fill={true}
-            className={data.contain ? "object-contain" : "object-cover"}
-          />
-        </div>
+      {data.embed ? (
+        <YouTubeEmbed className="mb-2 min-h-36 w-full" id={data.embed} />
+      ) : (
+        (data.image || placeholder) && (
+          <div
+            className="relative mb-2 min-h-36 w-full overflow-hidden rounded-md"
+            data-tina-field={tinaField(data, "image")}
+          >
+            <Image
+              src={
+                usePlaceholder
+                  ? placeholderImage
+                  : (data.image ?? placeholderImage)
+              }
+              onError={() => setUsePlaceholder(true)}
+              alt={data.altText ?? "Card Image"}
+              fill={true}
+              className={data.contain ? "object-contain" : "object-cover"}
+            />
+          </div>
+        )
       )}
       <Icon data={{ name: data.icon }} className="size-6 text-sswRed" />
       {data.chips && <PillGroup data={data.chips} />}

components/embeds/youtubeEmbed.tsx

@@ -1,7 +1,7 @@
 type YouTubeEmbedProps = {
   className?: string;
-  width: string;
-  height: string;
+  width?: string;
+  height?: string;
   id: string;
   autoplay?: boolean;
 };