@dcodegroup-au/page-builder 0.8.0 → 0.8.1

package/dist/page-builder.css

@@ -3898,7 +3898,7 @@ select {
   -webkit-line-clamp: 4; /* Limit the text to 3 lines */
 }
 
-.card[data-v-b6625ed3] {
+.card[data-v-77dcb437] {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/page-builder.es.js

@@ -448,11 +448,11 @@ const _hoisted_8$o = { class: "flex flex-col gap-1" };
 const _hoisted_9$n = { class: "font-semibold text-gray-900" };
 const _hoisted_10$j = { class: "text-sm text-gray-600" };
 const _hoisted_11$g = ["disabled"];
-const _hoisted_12$d = { class: "flex flex-col gap-3" };
+const _hoisted_12$e = { class: "flex flex-col gap-3" };
 const _hoisted_13$b = ["onClick"];
 const _hoisted_14$9 = ["onClick"];
-const _hoisted_15$7 = { class: "text-xs text-gray-600" };
-const _hoisted_16$4 = { class: "text-sm font-medium text-gray-900" };
+const _hoisted_15$8 = { class: "text-xs text-gray-600" };
+const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
 const _sfc_main$Q = {
   __name: "Items",
   props: {
@@ -526,7 +526,7 @@ const _sfc_main$Q = {
                   ], 10, _hoisted_11$g)
                 ])
               ]),
-              createElementVNode("div", _hoisted_12$d, [
+              createElementVNode("div", _hoisted_12$e, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(dataRef.value.data, (item, index) => {
                   return openBlock(), createElementBlock("div", {
                     class: normalizeClass(["flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg", { "bg-gray-200 hover:bg-gray-200": openItemStates.value[index] }])
@@ -541,8 +541,8 @@ const _sfc_main$Q = {
                         class: "flex flex-1 flex-col cursor-pointer",
                         onClick: ($event) => edit(item, index)
                       }, [
-                        createElementVNode("div", _hoisted_15$7, toDisplayString(unref(singularize)(unref(parseName)(unref(type)))) + " #" + toDisplayString(index + 1), 1),
-                        createElementVNode("div", _hoisted_16$4, toDisplayString(item.title), 1)
+                        createElementVNode("div", _hoisted_15$8, toDisplayString(unref(singularize)(unref(parseName)(unref(type)))) + " #" + toDisplayString(index + 1), 1),
+                        createElementVNode("div", _hoisted_16$5, toDisplayString(item.title), 1)
                       ], 8, _hoisted_14$9),
                       createVNode(_sfc_main$S, {
                         onRemoveItem: ($event) => handleDeleteItem(index),
@@ -11701,7 +11701,7 @@ const _hoisted_8$n = ["src", "title"];
 const _hoisted_9$m = ["href"];
 const _hoisted_10$i = { class: "file-upload-title" };
 const _hoisted_11$f = { class: "file-upload-file-remove" };
-const _hoisted_12$c = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
+const _hoisted_12$d = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
 const _sfc_main$O = {
   __name: "FileUpload",
   props: {
@@ -11822,7 +11822,7 @@ const _sfc_main$O = {
             ref_key: "dropzone",
             ref: dropzone2
           }, null, 512),
-          createElementVNode("div", _hoisted_12$c, [
+          createElementVNode("div", _hoisted_12$d, [
             createElementVNode("div", null, [
               createVNode(unref(UploadCloud), { class: "w-6 h-6" })
             ]),
@@ -45224,17 +45224,17 @@ const _hoisted_8$k = { class: "flex items-center justify-between" };
 const _hoisted_9$k = { class: "text-lg font-semibold text-gray-900" };
 const _hoisted_10$g = { class: "relative flex items-end" };
 const _hoisted_11$e = { class: "flex flex-col gap-6" };
-const _hoisted_12$b = {
+const _hoisted_12$c = {
   key: 0,
   class: "flex gap-4"
 };
 const _hoisted_13$a = { class: "flex items-center gap-2 cursor-pointer" };
 const _hoisted_14$8 = ["name", "value", "onUpdate:modelValue", "onChange"];
-const _hoisted_15$6 = {
+const _hoisted_15$7 = {
   key: 1,
   class: "flex flex-col gap-1.5"
 };
-const _hoisted_16$3 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
@@ -45364,7 +45364,7 @@ const _sfc_main$C = {
                   ])
                 ]),
                 createElementVNode("div", _hoisted_11$e, [
-                  !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (openBlock(), createElementBlock("div", _hoisted_12$b, [
+                  !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (openBlock(), createElementBlock("div", _hoisted_12$c, [
                     (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
                       return createElementVNode("label", _hoisted_13$a, [
                         withDirectives(createElementVNode("input", {
@@ -45381,7 +45381,7 @@ const _sfc_main$C = {
                       ]);
                     }), 64))
                   ])) : createCommentVNode("", true),
-                  !item.hasOwnProperty("content_type") || item.content_type === "content" ? (openBlock(), createElementBlock("div", _hoisted_15$6, [
+                  !item.hasOwnProperty("content_type") || item.content_type === "content" ? (openBlock(), createElementBlock("div", _hoisted_15$7, [
                     ["feature_items", "faqs", "pricing"].includes(componentData.value.type) ? (openBlock(), createBlock(_sfc_main$D, {
                       key: 0,
                       data: item
@@ -45405,7 +45405,7 @@ const _sfc_main$C = {
                             placeholder: "Title",
                             maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_16$3)), [
+                          }, null, 8, _hoisted_16$4)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true),
                           isBulletPoint.value ? withDirectives((openBlock(), createElementBlock("textarea", {
@@ -45479,7 +45479,7 @@ const _hoisted_8$j = { class: "text-lg font-semibold text-gray-900" };
 const _hoisted_9$j = { class: "relative flex items-end" };
 const _hoisted_10$f = { class: "flex flex-col gap-6" };
 const _hoisted_11$d = { class: "flex flex-col gap-1.5" };
-const _hoisted_12$a = ["onUpdate:modelValue"];
+const _hoisted_12$b = ["onUpdate:modelValue"];
 const _sfc_main$B = {
   __name: "Logos",
   props: {
@@ -45581,7 +45581,7 @@ const _sfc_main$B = {
                           type: "text",
                           placeholder: "Enter your url",
                           class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                        }, null, 8, _hoisted_12$a), [
+                        }, null, 8, _hoisted_12$b), [
                           [vModelText, item.url]
                         ])
                       ]),
@@ -45765,8 +45765,9 @@ const _hoisted_6$k = { class: "flex flex-col gap-3" };
 const _hoisted_7$j = { class: "flex items-center justify-between" };
 const _hoisted_8$i = { class: "text-lg font-semibold text-gray-900" };
 const _hoisted_9$i = { class: "relative flex items-end" };
-const _hoisted_10$e = { class: "flex flex-col gap-6" };
-const _hoisted_11$c = { class: "flex flex-col gap-1.5" };
+const _hoisted_10$e = ["onUpdate:modelValue"];
+const _hoisted_11$c = { class: "flex flex-col gap-6" };
+const _hoisted_12$a = { class: "flex flex-col gap-1.5" };
 const _sfc_main$y = {
   __name: "VideoGrid",
   props: {
@@ -45841,8 +45842,29 @@ const _sfc_main$y = {
                     }, null, 8, ["onRemoveItem"])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_10$e, [
-                  createElementVNode("div", _hoisted_11$c, [
+                createVNode(_sfc_main$P, {
+                  "is-vertical": "",
+                  field: "line.title",
+                  "label-text": "Youtube URL",
+                  class: "w-full",
+                  value: item.youtube_url
+                }, {
+                  default: withCtx(() => [
+                    withDirectives(createElementVNode("input", {
+                      "onUpdate:modelValue": ($event) => item.youtube_url = $event,
+                      name: "youtube_url.youtube_url",
+                      type: "text",
+                      placeholder: "Url",
+                      class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                    }, null, 8, _hoisted_10$e), [
+                      [vModelText, item.youtube_url]
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["value"]),
+                _cache[1] || (_cache[1] = createElementVNode("p", null, "OR", -1)),
+                createElementVNode("div", _hoisted_11$c, [
+                  createElementVNode("div", _hoisted_12$a, [
                     createVNode(unref(VFileUpload), {
                       name: "image",
                       type: "video",
@@ -46167,11 +46189,11 @@ const _hoisted_11$b = { class: "flex flex-col" };
 const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
 const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
 const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
-const _hoisted_15$5 = {
+const _hoisted_15$6 = {
   key: 0,
   class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
 };
-const _hoisted_16$2 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
 const _hoisted_17$1 = ["value"];
 const _hoisted_18$1 = {
   key: 1,
@@ -46312,9 +46334,9 @@ const _sfc_main$t = {
             }), 256))
           ]),
           createElementVNode("div", _hoisted_14$7, [
-            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_15$5, [
+            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_15$6, [
               _cache[3] || (_cache[3] = createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-              createElementVNode("div", _hoisted_16$2, [
+              createElementVNode("div", _hoisted_16$3, [
                 createVNode(_sfc_main$P, {
                   field: "breadcrumb",
                   "label-text": "Breadcrumb section",
@@ -48455,11 +48477,11 @@ const _hoisted_11$9 = ["innerHTML"];
 const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
 const _hoisted_13$7 = ["href"];
 const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 lg:right-4 flex gap-4" };
-const _hoisted_15$4 = {
+const _hoisted_15$5 = {
   key: 0,
   class: "flex sm:justify-center mb-6 lg:mb-10"
 };
-const _hoisted_16$1 = ["href", "target"];
+const _hoisted_16$2 = ["href", "target"];
 const _sfc_main$j = {
   __name: "CarouselPresenter",
   props: {
@@ -48605,7 +48627,7 @@ const _sfc_main$j = {
             createVNode(unref(ChevronRight), { class: "w-6 h-6" })
           ], 2)
         ]),
-        ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
+        ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (openBlock(), createElementBlock("div", _hoisted_15$5, [
           createElementVNode("a", {
             class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
             href: unref(formatUrl)(__props.component.button.url),
@@ -48613,7 +48635,7 @@ const _sfc_main$j = {
           }, [
             createTextVNode(toDisplayString(__props.component.button.title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_16$1)
+          ], 8, _hoisted_16$2)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -48680,31 +48702,36 @@ const PlayButton = { render: render$e };
 const _hoisted_1$v = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 w-full" };
 const _hoisted_2$f = {
   key: 0,
-  class: "relative group"
+  class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
+};
+const _hoisted_3$f = {
+  key: 0,
+  class: "w-full h-[281px] md:rounded-2xl"
 };
-const _hoisted_3$f = ["onClick"];
 const _hoisted_4$f = ["src"];
-const _hoisted_5$f = ["src"];
-const _hoisted_6$f = {
+const _hoisted_5$f = ["onClick"];
+const _hoisted_6$f = ["src"];
+const _hoisted_7$e = ["src"];
+const _hoisted_8$d = {
   key: 2,
   class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4",
   alt: "No Available",
   src: _imports_0
 };
-const _hoisted_7$e = { class: "flex flex-col gap-2 items-start text-left w-full" };
-const _hoisted_8$d = {
+const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
+const _hoisted_10$9 = {
   key: 0,
   class: "flex gap-2"
 };
-const _hoisted_9$d = ["href"];
-const _hoisted_10$9 = { class: "flex justify-between" };
-const _hoisted_11$8 = ["innerHTML"];
-const _hoisted_12$6 = { class: "text-gray-500 text-sm mb-4" };
-const _hoisted_13$6 = {
+const _hoisted_11$8 = ["href"];
+const _hoisted_12$6 = { class: "flex justify-between" };
+const _hoisted_13$6 = ["innerHTML"];
+const _hoisted_14$5 = { class: "text-gray-500 text-sm mb-4" };
+const _hoisted_15$4 = {
   key: 0,
   class: "flex justify-center"
 };
-const _hoisted_14$5 = ["href", "target"];
+const _hoisted_16$1 = ["href", "target"];
 const _sfc_main$h = {
   __name: "CollectionGridPresenter",
   props: {
@@ -48741,6 +48768,13 @@ const _sfc_main$h = {
         videoRefs.value[index] = el;
       }
     };
+    const getEmbedUrl = (item) => {
+      if (!item.youtube_url) return null;
+      const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+      const id = m ? m[1] : null;
+      if (!id) return null;
+      return `https://www.youtube.com/embed/${id}`;
+    };
     return (_ctx, _cache) => {
       var _a2, _b2;
       return openBlock(), createElementBlock("div", {
@@ -48750,35 +48784,45 @@ const _sfc_main$h = {
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (card, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
-              class: "card bg-white sm:p-0 px-4"
+              class: "card bg-white sm:p-0 px-4 w-full"
             }, [
               __props.component.type === "video_grid" ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
-                createElementVNode("video", {
-                  onClick: ($event) => togglePlayPause(index),
-                  ref_for: true,
-                  ref: (el) => setVideoRef(el, index),
-                  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
-                  width: "640",
-                  height: "360",
-                  preload: "metadata"
-                }, [
-                  createElementVNode("source", {
-                    src: `${card.video}#t=2`
+                (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (openBlock(), createElementBlock("div", _hoisted_3$f, [
+                  createElementVNode("iframe", {
+                    src: getEmbedUrl(card),
+                    frameborder: "0",
+                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                    allowfullscreen: "",
+                    class: "w-full h-full"
                   }, null, 8, _hoisted_4$f)
-                ], 8, _hoisted_3$f),
-                !isPlaying.value[index] ? (openBlock(), createBlock(unref(PlayButton), {
-                  key: 0,
-                  class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
-                  onClick: ($event) => togglePlayPause(index)
-                }, null, 8, ["onClick"])) : createCommentVNode("", true)
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createElementVNode("video", {
+                    onClick: ($event) => togglePlayPause(index),
+                    ref_for: true,
+                    ref: (el) => setVideoRef(el, index),
+                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                    width: "640",
+                    height: "360",
+                    preload: "metadata"
+                  }, [
+                    createElementVNode("source", {
+                      src: `${card.video}#t=2`
+                    }, null, 8, _hoisted_6$f)
+                  ], 8, _hoisted_5$f),
+                  !isPlaying.value[index] ? (openBlock(), createBlock(unref(PlayButton), {
+                    key: 0,
+                    class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
+                    onClick: ($event) => togglePlayPause(index)
+                  }, null, 8, ["onClick"])) : createCommentVNode("", true)
+                ], 64))
               ])) : card.image ? (openBlock(), createElementBlock("img", {
                 key: 1,
                 src: card.image,
                 alt: "Card Image",
                 class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-              }, null, 8, _hoisted_5$f)) : (openBlock(), createElementBlock("img", _hoisted_6$f)),
-              createElementVNode("div", _hoisted_7$e, [
-                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_8$d, [
+              }, null, 8, _hoisted_7$e)) : (openBlock(), createElementBlock("img", _hoisted_8$d)),
+              createElementVNode("div", _hoisted_9$d, [
+                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(card.categories, (tag) => {
                     return openBlock(), createElementBlock("span", {
                       key: tag,
@@ -48797,20 +48841,20 @@ const _sfc_main$h = {
                   target: "_blank",
                   rel: "noopener noreferrer"
                 }, [
-                  createElementVNode("div", _hoisted_10$9, [
+                  createElementVNode("div", _hoisted_12$6, [
                     createElementVNode("span", {
                       class: "w-5/6 leading-[28px]",
                       innerHTML: card.title
-                    }, null, 8, _hoisted_11$8),
+                    }, null, 8, _hoisted_13$6),
                     createVNode(unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                   ])
-                ], 8, _hoisted_9$d)) : createCommentVNode("", true),
-                createElementVNode("p", _hoisted_12$6, toDisplayString(card.dateTime), 1)
+                ], 8, _hoisted_11$8)) : createCommentVNode("", true),
+                createElementVNode("p", _hoisted_14$5, toDisplayString(card.dateTime), 1)
               ])
             ]);
           }), 128))
         ]),
-        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_13$6, [
+        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
           createElementVNode("a", {
             class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
             href: unref(formatUrl)(unref(button).url),
@@ -48818,13 +48862,13 @@ const _sfc_main$h = {
           }, [
             createTextVNode(toDisplayString(unref(button).title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_14$5)
+          ], 8, _hoisted_16$1)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b6625ed3"]]);
+const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
 const _hoisted_1$u = { class: "overflow-hidden" };
 const _sfc_main$g = {
   __name: "CollectionGrid",

package/dist/page-builder.umd.js

@@ -451,11 +451,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_9$n = { class: "font-semibold text-gray-900" };
   const _hoisted_10$j = { class: "text-sm text-gray-600" };
   const _hoisted_11$g = ["disabled"];
-  const _hoisted_12$d = { class: "flex flex-col gap-3" };
+  const _hoisted_12$e = { class: "flex flex-col gap-3" };
   const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
-  const _hoisted_15$7 = { class: "text-xs text-gray-600" };
-  const _hoisted_16$4 = { class: "text-sm font-medium text-gray-900" };
+  const _hoisted_15$8 = { class: "text-xs text-gray-600" };
+  const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
   const _sfc_main$Q = {
     __name: "Items",
     props: {
@@ -529,7 +529,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     ], 10, _hoisted_11$g)
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_12$d, [
+                vue.createElementVNode("div", _hoisted_12$e, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dataRef.value.data, (item, index) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       class: vue.normalizeClass(["flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg", { "bg-gray-200 hover:bg-gray-200": openItemStates.value[index] }])
@@ -544,8 +544,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           class: "flex flex-1 flex-col cursor-pointer",
                           onClick: ($event) => edit(item, index)
                         }, [
-                          vue.createElementVNode("div", _hoisted_15$7, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
-                          vue.createElementVNode("div", _hoisted_16$4, vue.toDisplayString(item.title), 1)
+                          vue.createElementVNode("div", _hoisted_15$8, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
+                          vue.createElementVNode("div", _hoisted_16$5, vue.toDisplayString(item.title), 1)
                         ], 8, _hoisted_14$9),
                         vue.createVNode(_sfc_main$S, {
                           onRemoveItem: ($event) => handleDeleteItem(index),
@@ -11704,7 +11704,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_9$m = ["href"];
   const _hoisted_10$i = { class: "file-upload-title" };
   const _hoisted_11$f = { class: "file-upload-file-remove" };
-  const _hoisted_12$c = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
+  const _hoisted_12$d = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
   const _sfc_main$O = {
     __name: "FileUpload",
     props: {
@@ -11825,7 +11825,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ref_key: "dropzone",
               ref: dropzone2
             }, null, 512),
-            vue.createElementVNode("div", _hoisted_12$c, [
+            vue.createElementVNode("div", _hoisted_12$d, [
               vue.createElementVNode("div", null, [
                 vue.createVNode(vue.unref(UploadCloud), { class: "w-6 h-6" })
               ]),
@@ -45227,17 +45227,17 @@ ${escapeText(this.code(index, length))}
   const _hoisted_9$k = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_10$g = { class: "relative flex items-end" };
   const _hoisted_11$e = { class: "flex flex-col gap-6" };
-  const _hoisted_12$b = {
+  const _hoisted_12$c = {
     key: 0,
     class: "flex gap-4"
   };
   const _hoisted_13$a = { class: "flex items-center gap-2 cursor-pointer" };
   const _hoisted_14$8 = ["name", "value", "onUpdate:modelValue", "onChange"];
-  const _hoisted_15$6 = {
+  const _hoisted_15$7 = {
     key: 1,
     class: "flex flex-col gap-1.5"
   };
-  const _hoisted_16$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
@@ -45367,7 +45367,7 @@ ${escapeText(this.code(index, length))}
                     ])
                   ]),
                   vue.createElementVNode("div", _hoisted_11$e, [
-                    !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$b, [
+                    !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$c, [
                       (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
                         return vue.createElementVNode("label", _hoisted_13$a, [
                           vue.withDirectives(vue.createElementVNode("input", {
@@ -45384,7 +45384,7 @@ ${escapeText(this.code(index, length))}
                         ]);
                       }), 64))
                     ])) : vue.createCommentVNode("", true),
-                    !item.hasOwnProperty("content_type") || item.content_type === "content" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
+                    !item.hasOwnProperty("content_type") || item.content_type === "content" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$7, [
                       ["feature_items", "faqs", "pricing"].includes(componentData.value.type) ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                         key: 0,
                         data: item
@@ -45408,7 +45408,7 @@ ${escapeText(this.code(index, length))}
                               placeholder: "Title",
                               maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_16$3)), [
+                            }, null, 8, _hoisted_16$4)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true),
                             isBulletPoint.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
@@ -45482,7 +45482,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_9$j = { class: "relative flex items-end" };
   const _hoisted_10$f = { class: "flex flex-col gap-6" };
   const _hoisted_11$d = { class: "flex flex-col gap-1.5" };
-  const _hoisted_12$a = ["onUpdate:modelValue"];
+  const _hoisted_12$b = ["onUpdate:modelValue"];
   const _sfc_main$B = {
     __name: "Logos",
     props: {
@@ -45584,7 +45584,7 @@ ${escapeText(this.code(index, length))}
                             type: "text",
                             placeholder: "Enter your url",
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_12$a), [
+                          }, null, 8, _hoisted_12$b), [
                             [vue.vModelText, item.url]
                           ])
                         ]),
@@ -45768,8 +45768,9 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$j = { class: "flex items-center justify-between" };
   const _hoisted_8$i = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_9$i = { class: "relative flex items-end" };
-  const _hoisted_10$e = { class: "flex flex-col gap-6" };
-  const _hoisted_11$c = { class: "flex flex-col gap-1.5" };
+  const _hoisted_10$e = ["onUpdate:modelValue"];
+  const _hoisted_11$c = { class: "flex flex-col gap-6" };
+  const _hoisted_12$a = { class: "flex flex-col gap-1.5" };
   const _sfc_main$y = {
     __name: "VideoGrid",
     props: {
@@ -45844,8 +45845,29 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$e, [
-                    vue.createElementVNode("div", _hoisted_11$c, [
+                  vue.createVNode(_sfc_main$P, {
+                    "is-vertical": "",
+                    field: "line.title",
+                    "label-text": "Youtube URL",
+                    class: "w-full",
+                    value: item.youtube_url
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.withDirectives(vue.createElementVNode("input", {
+                        "onUpdate:modelValue": ($event) => item.youtube_url = $event,
+                        name: "youtube_url.youtube_url",
+                        type: "text",
+                        placeholder: "Url",
+                        class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                      }, null, 8, _hoisted_10$e), [
+                        [vue.vModelText, item.youtube_url]
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]),
+                  _cache[1] || (_cache[1] = vue.createElementVNode("p", null, "OR", -1)),
+                  vue.createElementVNode("div", _hoisted_11$c, [
+                    vue.createElementVNode("div", _hoisted_12$a, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
                         type: "video",
@@ -46170,11 +46192,11 @@ ${escapeText(this.code(index, length))}
   const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
   const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
   const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
-  const _hoisted_15$5 = {
+  const _hoisted_15$6 = {
     key: 0,
     class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
   };
-  const _hoisted_16$2 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+  const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
   const _hoisted_17$1 = ["value"];
   const _hoisted_18$1 = {
     key: 1,
@@ -46315,9 +46337,9 @@ ${escapeText(this.code(index, length))}
               }), 256))
             ]),
             vue.createElementVNode("div", _hoisted_14$7, [
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
                 _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
-                vue.createElementVNode("div", _hoisted_16$2, [
+                vue.createElementVNode("div", _hoisted_16$3, [
                   vue.createVNode(_sfc_main$P, {
                     field: "breadcrumb",
                     "label-text": "Breadcrumb section",
@@ -48458,11 +48480,11 @@ ${escapeText(this.code(index, length))}
   const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
   const _hoisted_13$7 = ["href"];
   const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 lg:right-4 flex gap-4" };
-  const _hoisted_15$4 = {
+  const _hoisted_15$5 = {
     key: 0,
     class: "flex sm:justify-center mb-6 lg:mb-10"
   };
-  const _hoisted_16$1 = ["href", "target"];
+  const _hoisted_16$2 = ["href", "target"];
   const _sfc_main$j = {
     __name: "CarouselPresenter",
     props: {
@@ -48608,7 +48630,7 @@ ${escapeText(this.code(index, length))}
               vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
             ], 2)
           ]),
-          ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
+          ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(__props.component.button.url),
@@ -48616,7 +48638,7 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(__props.component.button.title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_16$1)
+            ], 8, _hoisted_16$2)
           ])) : vue.createCommentVNode("", true)
         ]);
       };
@@ -48683,31 +48705,36 @@ ${escapeText(this.code(index, length))}
   const _hoisted_1$v = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 w-full" };
   const _hoisted_2$f = {
     key: 0,
-    class: "relative group"
+    class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
+  };
+  const _hoisted_3$f = {
+    key: 0,
+    class: "w-full h-[281px] md:rounded-2xl"
   };
-  const _hoisted_3$f = ["onClick"];
   const _hoisted_4$f = ["src"];
-  const _hoisted_5$f = ["src"];
-  const _hoisted_6$f = {
+  const _hoisted_5$f = ["onClick"];
+  const _hoisted_6$f = ["src"];
+  const _hoisted_7$e = ["src"];
+  const _hoisted_8$d = {
     key: 2,
     class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4",
     alt: "No Available",
     src: _imports_0
   };
-  const _hoisted_7$e = { class: "flex flex-col gap-2 items-start text-left w-full" };
-  const _hoisted_8$d = {
+  const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
+  const _hoisted_10$9 = {
     key: 0,
     class: "flex gap-2"
   };
-  const _hoisted_9$d = ["href"];
-  const _hoisted_10$9 = { class: "flex justify-between" };
-  const _hoisted_11$8 = ["innerHTML"];
-  const _hoisted_12$6 = { class: "text-gray-500 text-sm mb-4" };
-  const _hoisted_13$6 = {
+  const _hoisted_11$8 = ["href"];
+  const _hoisted_12$6 = { class: "flex justify-between" };
+  const _hoisted_13$6 = ["innerHTML"];
+  const _hoisted_14$5 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_15$4 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_14$5 = ["href", "target"];
+  const _hoisted_16$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48744,6 +48771,13 @@ ${escapeText(this.code(index, length))}
           videoRefs.value[index] = el;
         }
       };
+      const getEmbedUrl = (item) => {
+        if (!item.youtube_url) return null;
+        const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+        const id = m ? m[1] : null;
+        if (!id) return null;
+        return `https://www.youtube.com/embed/${id}`;
+      };
       return (_ctx, _cache) => {
         var _a2, _b2;
         return vue.openBlock(), vue.createElementBlock("div", {
@@ -48753,35 +48787,45 @@ ${escapeText(this.code(index, length))}
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (card, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
-                class: "card bg-white sm:p-0 px-4"
+                class: "card bg-white sm:p-0 px-4 w-full"
               }, [
                 __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
-                  vue.createElementVNode("video", {
-                    onClick: ($event) => togglePlayPause(index),
-                    ref_for: true,
-                    ref: (el) => setVideoRef(el, index),
-                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
-                    width: "640",
-                    height: "360",
-                    preload: "metadata"
-                  }, [
-                    vue.createElementVNode("source", {
-                      src: `${card.video}#t=2`
+                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f, [
+                    vue.createElementVNode("iframe", {
+                      src: getEmbedUrl(card),
+                      frameborder: "0",
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowfullscreen: "",
+                      class: "w-full h-full"
                     }, null, 8, _hoisted_4$f)
-                  ], 8, _hoisted_3$f),
-                  !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
-                    key: 0,
-                    class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
-                    onClick: ($event) => togglePlayPause(index)
-                  }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                  ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    vue.createElementVNode("video", {
+                      onClick: ($event) => togglePlayPause(index),
+                      ref_for: true,
+                      ref: (el) => setVideoRef(el, index),
+                      class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                      width: "640",
+                      height: "360",
+                      preload: "metadata"
+                    }, [
+                      vue.createElementVNode("source", {
+                        src: `${card.video}#t=2`
+                      }, null, 8, _hoisted_6$f)
+                    ], 8, _hoisted_5$f),
+                    !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
+                      key: 0,
+                      class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
+                      onClick: ($event) => togglePlayPause(index)
+                    }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                  ], 64))
                 ])) : card.image ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 1,
                   src: card.image,
                   alt: "Card Image",
                   class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-                }, null, 8, _hoisted_5$f)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_6$f)),
-                vue.createElementVNode("div", _hoisted_7$e, [
-                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$d, [
+                }, null, 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_8$d)),
+                vue.createElementVNode("div", _hoisted_9$d, [
+                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$9, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
                       return vue.openBlock(), vue.createElementBlock("span", {
                         key: tag,
@@ -48800,20 +48844,20 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_10$9, [
+                    vue.createElementVNode("div", _hoisted_12$6, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_11$8),
+                      }, null, 8, _hoisted_13$6),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                     ])
-                  ], 8, _hoisted_9$d)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("p", _hoisted_12$6, vue.toDisplayString(card.dateTime), 1)
+                  ], 8, _hoisted_11$8)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_14$5, vue.toDisplayString(card.dateTime), 1)
                 ])
               ]);
             }), 128))
           ]),
-          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$6, [
+          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(vue.unref(button).url),
@@ -48821,13 +48865,13 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(vue.unref(button).title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_14$5)
+            ], 8, _hoisted_16$1)
           ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b6625ed3"]]);
+  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",

package/example/src/pages/BestLife.js

@@ -192,6 +192,7 @@ export const BestLife = {
           data: [
             {
               video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
+              youtube_url: "https://www.youtube.com/watch?v=cEpTYBuR7vY",
             },
             {
               video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/builders/VideoGrid.vue

@@ -37,6 +37,22 @@
             <ActionMenu @removeItem="handleDeleteItem(index)"/>
           </div>
         </div>
+        <InputWrapper
+            is-vertical
+            field="line.title"
+            label-text="Youtube URL"
+            class="w-full"
+            :value="item.youtube_url"
+        >
+          <input
+              v-model="item.youtube_url"
+              name="youtube_url.youtube_url"
+              type="text"
+              placeholder="Url"
+              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+          />
+        </InputWrapper>
+        <p>OR</p>
         <div class="flex flex-col gap-6">
           <div class="flex flex-col gap-1.5">
             <VFileUpload
@@ -59,6 +75,7 @@ import {defaultProps} from "@/components/helpers/defaultProps";
 import ActionMenu from "@/components/common/ActionMenu.vue";
 import VModal from "@/components/common/Modal.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -1,24 +1,35 @@
 <template>
   <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
-      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4">
-        <div v-if="component.type === 'video_grid'" class="relative group">
-          <video
-              @click="togglePlayPause(index)"
-              :ref="(el) => setVideoRef(el, index)"
-              class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
-              width="640"
-              height="360"
-              preload="metadata"
-          >
-            <source :src="`${card.video}#t=2`" />
-          </video>
-          <PlayButton
-              v-if="!isPlaying[index]"
-              class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
-              @click="togglePlayPause(index)">
+      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4 w-full">
+        <div v-if="component.type === 'video_grid'" class="relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden">
+          <div v-if="card?.youtube_url && getEmbedUrl(card)" class="w-full h-[281px] md:rounded-2xl">
+            <iframe
+                :src="getEmbedUrl(card)"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+                class="w-full h-full"
+            ></iframe>
+          </div>
+          <template v-else>
+            <video
+                @click="togglePlayPause(index)"
+                :ref="(el) => setVideoRef(el, index)"
+                class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
+                width="640"
+                height="360"
+                preload="metadata"
+            >
+              <source :src="`${card.video}#t=2`" />
+            </video>
+            <PlayButton
+                v-if="!isPlaying[index]"
+                class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
+                @click="togglePlayPause(index)">
 
-          </PlayButton>
+            </PlayButton>
+          </template>
         </div>
         <img
             v-else-if="card.image"
@@ -114,6 +125,16 @@ const setVideoRef = (el, index) => {
     videoRefs.value[index] = el;
   }
 };
+
+const getEmbedUrl = (item) => {
+  if (!item.youtube_url) return null;
+  // match common YouTube URL formats and extract the 11-char id
+  const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+  const id = m ? m[1] : null;
+  if (!id) return null;
+  return `https://www.youtube.com/embed/${id}`;
+};
+
 </script>
 
 <style scoped>