💄V2 Card component - added option to embed Youtube videos inside the image text block

components/blocks/imageComponents/ImageComponentLayout.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Container } from "@/components/util/container";
+import getYouTubeVideoId from "@/services/client/youtube.service";
 import "aos/dist/aos.css";
 import Image from "next/image";
 import { classNames } from "tinacms";
@@ -8,14 +9,16 @@ import V2ComponentWrapper from "../../layout/v2ComponentWrapper";
 
 export const ImageComponentLayout = ({ data, children }) => {
   const imageIsLeftAligined = data.mediaConfiguration?.placement === "Left";
+  const isYouTube = data.mediaConfiguration?.mediaType === "youtube";
+  const youtubeVideoId = getYouTubeVideoId(data.mediaConfiguration?.youtubeUrl);
 
   return (
     <V2ComponentWrapper data={data}>
       <Container
         size="custom"
         className={classNames(
           "mx-auto flex flex-col gap-8 align-middle md:grid md:gap-16",
-          data.mediaConfiguration?.imageSource
+          data.mediaConfiguration?.imageSource || youtubeVideoId
             ? "md:grid-cols-2"
             : "md:grid-cols-1",
           data.mediaConfiguration?.mobilePlacement === "Above"
@@ -28,36 +31,54 @@ export const ImageComponentLayout = ({ data, children }) => {
       >
         <div
           className={classNames(
-            `flex aspect-auto w-full flex-col justify-center ${data?.mediaConfiguration?.imageSource ? "md:aspect-4/3" : "items-center"}`,
+            `flex aspect-auto w-full flex-col justify-center ${data?.mediaConfiguration?.imageSource || youtubeVideoId ? "md:aspect-4/3" : "items-center"}`,
             imageIsLeftAligined && "md:order-2",
             data.mediaConfiguration?.verticalPlacement === "Bottom" && "pb-12"
           )}
         >
           {children}
         </div>
 
-        {data.mediaConfiguration?.imageSource && (
+        {(data.mediaConfiguration?.imageSource || youtubeVideoId) && (
           <div
             className={classNames(
               "relative aspect-4/3 w-full md:aspect-auto",
               imageIsLeftAligined && "md:order-1"
             )}
           >
-            {data.mediaConfiguration.verticalPlacement === "Center"}
-            <Image
-              objectFit="contain"
-              fill={true}
-              className={classNames(
-                data.mediaConfiguration?.verticalPlacement === "Centered" &&
-                  "my-auto",
-                data.mediaConfiguration?.verticalPlacement === "Bottom" &&
-                  "mt-auto",
-                "!h-auto rounded-md"
-              )}
-              src={data.mediaConfiguration?.imageSource}
-              alt={data.mediaConfiguration?.altText ?? "image"}
-              data-tina-field={tinaField(data, "mediaConfiguration")}
-            />
+            {isYouTube && youtubeVideoId ? (
+              <iframe
+                className={classNames(
+                  "absolute inset-0 aspect-4/3 w-full rounded-md",
+                  data.mediaConfiguration?.verticalPlacement === "Centered" &&
+                    "my-auto",
+                  data.mediaConfiguration?.verticalPlacement === "Bottom" &&
+                    "mt-auto"
+                )}
+                src={`https://www.youtube.com/embed/${youtubeVideoId}?rel=0`}
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                data-tina-field={tinaField(data, "mediaConfiguration")}
+              />
+            ) : (
+              data.mediaConfiguration?.imageSource && (
+                <Image
+                  objectFit="contain"
+                  fill={true}
+                  className={classNames(
+                    data.mediaConfiguration?.verticalPlacement === "Centered" &&
+                      "my-auto",
+                    data.mediaConfiguration?.verticalPlacement === "Bottom" &&
+                      "mt-auto",
+                    "!h-auto rounded-md"
+                  )}
+                  src={data.mediaConfiguration?.imageSource}
+                  alt={data.mediaConfiguration?.altText ?? "image"}
+                  data-tina-field={tinaField(data, "mediaConfiguration")}
+                />
+              )
+            )}
           </div>
         )}
       </Container>

components/blocks/imageComponents/ImageComponentLayoutSchema.tsx

@@ -6,13 +6,25 @@ export const ImageComponentLayoutSchema = [
     type: "object",
     label: "Media",
     name: "mediaConfiguration",
-    description: "Media configuration including layout and image upload.",
+    description: "Media configuration including layout and image/video upload.",
     ui: {
       defaultItem: {
         placement: "Right",
+        mediaType: "image",
       },
     },
     fields: [
+      {
+        type: "string",
+        label: "Media Type",
+        name: "mediaType",
+        description: "Choose between image or YouTube video",
+        default: "image",
+        ui: {
+          component: "select",
+          options: ["image", "youtube"],
+        },
+      },
       {
         type: "string",
         label: "Media Placement",
@@ -29,7 +41,7 @@ export const ImageComponentLayoutSchema = [
         type: "string",
         label: "Media placement (vertical)",
         name: "verticalPlacement",
-        description: "Where the image sits vertically in desktop view",
+        description: "Where the media sits vertically in desktop view",
         ui: {
           component: "select",
           options: ["Centered", "Top", "Bottom"],
@@ -63,6 +75,13 @@ export const ImageComponentLayoutSchema = [
         description:
           "Upload an image or other media to display in the media text block. 4/3 aspect ratio recommended.",
       },
+      {
+        type: "string",
+        label: "YouTube URL",
+        name: "youtubeUrl",
+        description:
+          "Enter the YouTube video URL (only used if Media Type is set to youtube)",
+      },
       {
         type: "string",
         label: "Alt Text",

services/client/youtube.service.ts

@@ -0,0 +1,9 @@
+const getYouTubeVideoId = (url: string) => {
+  if (!url) return null;
+  // Handle different YouTube URL formats
+  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+  const match = url.match(regExp);
+  return match && match[2].length === 11 ? match[2] : null;
+};
+
+export default getYouTubeVideoId;