@g1cloud/page-builder-editor 1.0.0-alpha.102 → 1.0.0-alpha.103

package/dist/page-builder-editor.umd.cjs

@@ -1,6 +1,6 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@g1cloud/bluesea"), require("vue3-youtube")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@g1cloud/bluesea", "vue3-youtube"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["Page Builder Editor"] = {}, global2.Vue, global2.bluesea, global2.Vue3Youtube));
-})(this, function(exports2, vue, bluesea, YouTube) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@g1cloud/bluesea")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@g1cloud/bluesea"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["Page Builder Editor"] = {}, global2.Vue, global2.bluesea));
+})(this, function(exports2, vue, bluesea) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -7133,10 +7133,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   });
   const _hoisted_1$7$1 = ["href", "target"];
-  const _hoisted_2$3$1 = ["alt", "src"];
-  const _hoisted_3$l = ["alt", "src"];
-  const _hoisted_4$e = ["alt", "src"];
-  const _hoisted_5$b = ["alt", "src"];
+  const _hoisted_2$4$1 = ["alt", "src"];
+  const _hoisted_3$1$1 = ["alt", "src"];
+  const _hoisted_4$f = ["alt", "src"];
+  const _hoisted_5$c = ["alt", "src"];
   const _hoisted_6$a = ["poster"];
   const _hoisted_7$9 = ["src"];
   const _hoisted_8$8 = {
@@ -7207,7 +7207,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
                       style: vue.normalizeStyle(style.value),
                       class: "image"
-                    }, null, 12, _hoisted_2$3$1)
+                    }, null, 12, _hoisted_2$4$1)
                   ];
                 }),
                 _: 1
@@ -7217,7 +7217,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
                 style: vue.normalizeStyle(style.value),
                 class: "image"
-              }, null, 12, _hoisted_3$l))
+              }, null, 12, _hoisted_3$1$1))
             ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               tag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), {
                 key: 0,
@@ -7231,7 +7231,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
                       style: vue.normalizeStyle(style.value),
                       class: "image"
-                    }, null, 12, _hoisted_4$e)
+                    }, null, 12, _hoisted_4$f)
                   ];
                 }),
                 _: 1
@@ -7241,7 +7241,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).fileUrl,
                 style: vue.normalizeStyle(style.value),
                 class: "image"
-              }, null, 12, _hoisted_5$b))
+              }, null, 12, _hoisted_5$c))
             ], 64))
           ], 64)) : media.value.mediaType === "Video" ? (vue.openBlock(), vue.createElementBlock("video", {
             key: 1,
@@ -7311,7 +7311,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   });
   const _hoisted_1$5$1 = ["innerHTML"];
-  const _hoisted_2$2$1 = {
+  const _hoisted_2$3$1 = {
     key: 1,
     class: "placeholder",
     textContent: "Empty HTML"
@@ -7400,12 +7400,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ref: partRef,
           class: "html",
           innerHTML: (_b = html.value) == null ? void 0 : _b.tags
-        }, null, 8, _hoisted_1$5$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2$1)) : vue.createCommentVNode("", true);
+        }, null, 8, _hoisted_1$5$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3$1)) : vue.createCommentVNode("", true);
       };
     }
   });
   const _hoisted_1$4$1 = ["src"];
-  const _hoisted_2$1$1 = {
+  const _hoisted_2$2$1 = {
     key: 1,
     class: "placeholder",
     textContent: "Empty URL"
@@ -7553,11 +7553,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ref: iframeRef,
           src: url.value,
           style: vue.normalizeStyle(style.value)
-        }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1$1)) : vue.createCommentVNode("", true);
+        }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2$1)) : vue.createCommentVNode("", true);
       };
     }
   });
   const _hoisted_1$3$1 = {
+    key: 0,
+    class: "youtube-container",
+    style: { width: "100%" }
+  };
+  const _hoisted_2$1$1 = ["src"];
+  const _hoisted_3$l = {
     key: 1,
     class: "placeholder"
   };
@@ -7569,87 +7575,72 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       const props = __props;
-      const container = vue.ref();
-      const containerWidth = vue.ref(640);
-      const aspectRatio = vue.computed(() => {
-        var _a;
-        const raw = (_a = props.part.properties) == null ? void 0 : _a.aspectRatio;
-        if (!raw) return 16 / 9;
-        const parts = raw.split("/");
-        if (parts.length === 2) {
-          const w = Number(parts[0]);
-          const h = Number(parts[1]);
-          if (w > 0 && h > 0) return w / h;
-        }
-        return 16 / 9;
-      });
-      const playerHeight = vue.computed(() => Math.round(containerWidth.value / aspectRatio.value));
-      const updateWidth = () => {
-        if (container.value) {
-          containerWidth.value = container.value.clientWidth;
+      const extractVideoId = (raw) => {
+        const value = raw.trim();
+        if (!value) return void 0;
+        if (/^[\w-]{11}$/.test(value)) return value;
+        try {
+          const u = new URL(value);
+          const host = u.hostname.replace(/^www\./, "");
+          if (host === "youtu.be") {
+            const id = u.pathname.slice(1).split("/")[0];
+            return id || void 0;
+          }
+          if (host === "youtube.com" || host === "youtube-nocookie.com" || host === "m.youtube.com") {
+            const v = u.searchParams.get("v");
+            if (v) return v;
+            const segs = u.pathname.split("/").filter(Boolean);
+            const idx = segs.findIndex((s) => s === "embed" || s === "shorts" || s === "live" || s === "v");
+            if (idx >= 0 && segs[idx + 1]) return segs[idx + 1];
+          }
+        } catch {
         }
+        return void 0;
       };
-      let resizeObserver;
-      const onReady = () => {
-      };
-      const isYTReady = vue.ref(false);
-      vue.onMounted(() => {
-        if (container.value) {
-          updateWidth();
-          resizeObserver = new ResizeObserver(updateWidth);
-          resizeObserver.observe(container.value);
-        }
-        const interval = setInterval(() => {
-          try {
-            if (window && window.YT && window.YT.Player) {
-              isYTReady.value = true;
-              clearInterval(interval);
-            }
-          } catch (e) {
-          }
-        }, 500);
+      const embedSrc = vue.computed(() => {
+        var _a;
+        const raw = (_a = props.part.properties) == null ? void 0 : _a.url;
+        if (!raw) return void 0;
+        const id = extractVideoId(raw);
+        if (!id) return void 0;
+        return `https://www.youtube-nocookie.com/embed/${id}`;
       });
-      vue.onBeforeUnmount(() => {
-        resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      const aspectRatioCss = vue.computed(() => {
+        var _a;
+        const raw = (_a = props.part.properties) == null ? void 0 : _a.aspectRatio;
+        if (raw) {
+          const parts = raw.split("/");
+          if (parts.length === 2) {
+            const w = Number(parts[0]);
+            const h = Number(parts[1]);
+            if (w > 0 && h > 0) return `${w} / ${h}`;
+          }
+        }
+        return "16 / 9";
       });
+      const iframeStyle = vue.computed(() => ({
+        width: "100%",
+        aspectRatio: aspectRatioCss.value,
+        border: "0",
+        display: "block"
+      }));
       return (_ctx, _cache) => {
-        var _a, _b;
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
-            id: "youtube-iframe-js-api-script",
-            class: "optanon-category-C0004",
-            src: "https://www.youtube.com/iframe_api"
-          })),
-          ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            ref_key: "container",
-            ref: container,
-            class: "youtube-container"
-          }, [
-            isYTReady.value ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
-              key: 0,
-              ref: "youtube",
-              host: "https://www.youtube-nocookie.com",
-              src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
-              width: containerWidth.value,
-              height: playerHeight.value,
-              onReady
-            }, null, 8, ["src", "width", "height"])) : vue.createCommentVNode("", true)
-          ], 512)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
-            vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
-          ]))) : vue.createCommentVNode("", true)
-        ], 64);
+        return embedSrc.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
+          vue.createElementVNode("iframe", {
+            src: embedSrc.value,
+            style: vue.normalizeStyle(iframeStyle.value),
+            frameborder: "0",
+            allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share",
+            allowfullscreen: "",
+            loading: "lazy",
+            title: "YouTube video"
+          }, null, 12, _hoisted_2$1$1)
+        ])) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$l, _cache[0] || (_cache[0] = [
+          vue.createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
+        ]))) : vue.createCommentVNode("", true);
       };
     }
   });
-  const _export_sfc$1 = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-  const PbYoutubeWidget = /* @__PURE__ */ _export_sfc$1(_sfc_main$4$1, [["__scopeId", "data-v-675477df"]]);
   const defaultPartDefinitions = {
     "Section": {
       partType: "Section",
@@ -7691,7 +7682,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       partType: "Widget",
       partName: "YoutubeWidget",
       className: "pb-youtube-widget",
-      creator: () => PbYoutubeWidget
+      creator: () => _sfc_main$4$1
     }
     /*
      * BSP에서 사용안함
@@ -9860,8 +9851,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$D = { class: "group-editor group-editor-position" };
   const _hoisted_2$u = { class: "flex-align-center" };
   const _hoisted_3$k = { class: "title" };
-  const _hoisted_4$d = { class: "flex-grow-1" };
-  const _hoisted_5$a = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_4$e = { class: "flex-grow-1" };
+  const _hoisted_5$b = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$9 = { class: "text-center" };
   const _hoisted_7$8 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_8$7 = { class: "text-center" };
@@ -9896,8 +9887,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.position" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$d, [
-              vue.createElementVNode("div", _hoisted_5$a, [
+            vue.createElementVNode("div", _hoisted_4$e, [
+              vue.createElementVNode("div", _hoisted_5$b, [
                 vue.createElementVNode("div", _hoisted_6$9, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
@@ -9948,8 +9939,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$C = { class: "group-editor group-editor-size" };
   const _hoisted_2$t = { class: "flex-align-center" };
   const _hoisted_3$j = { class: "title" };
-  const _hoisted_4$c = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _hoisted_5$9 = { class: "flex-align-center mt-12" };
+  const _hoisted_4$d = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_5$a = { class: "flex-align-center mt-12" };
   const _hoisted_6$8 = { class: "title" };
   const _hoisted_7$7 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_8$6 = { class: "flex-align-center mt-12" };
@@ -9990,7 +9981,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.size" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$c, [
+            vue.createElementVNode("div", _hoisted_4$d, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
                 class: "flex-grow-1 mr-2",
@@ -10005,7 +9996,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               }, null, 8, ["model-value"])
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_5$9, [
+          vue.createElementVNode("div", _hoisted_5$a, [
             vue.createElementVNode("div", _hoisted_6$8, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.maxSize" }]
@@ -10216,7 +10207,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     -1
     /* HOISTED */
   );
-  const _hoisted_4$b = [
+  const _hoisted_4$c = [
     _hoisted_3$i
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10251,7 +10242,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               class: "vc-alpha-pointer",
               style: vue.normalizeStyle({ left: `${$options.colors.a * 100}%` })
             },
-            _hoisted_4$b,
+            _hoisted_4$c,
             4
             /* STYLE */
           )
@@ -11328,7 +11319,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$A = { class: "vc-editable-input" };
   const _hoisted_2$r = ["aria-labelledby"];
   const _hoisted_3$h = ["id", "for"];
-  const _hoisted_4$a = { class: "vc-input__desc" };
+  const _hoisted_4$b = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
       vue.withDirectives(vue.createElementVNode("input", {
@@ -11348,7 +11339,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$h),
       vue.createElementVNode(
         "span",
-        _hoisted_4$a,
+        _hoisted_4$b,
         vue.toDisplayString($props.desc),
         1
         /* TEXT */
@@ -11446,7 +11437,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     -1
     /* HOISTED */
   );
-  const _hoisted_4$9 = [
+  const _hoisted_4$a = [
     _hoisted_3$g
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11469,7 +11460,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             class: "vc-saturation-pointer",
             style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft })
           },
-          _hoisted_4$9,
+          _hoisted_4$a,
           4
           /* STYLE */
         )
@@ -11749,8 +11740,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$x = { class: "vc-sketch-saturation-wrap" };
   const _hoisted_2$o = { class: "vc-sketch-controls" };
   const _hoisted_3$e = { class: "vc-sketch-sliders" };
-  const _hoisted_4$8 = { class: "vc-sketch-hue-wrap" };
-  const _hoisted_5$8 = {
+  const _hoisted_4$9 = { class: "vc-sketch-hue-wrap" };
+  const _hoisted_5$9 = {
     key: 0,
     class: "vc-sketch-alpha-wrap"
   };
@@ -11797,13 +11788,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         ]),
         vue.createElementVNode("div", _hoisted_2$o, [
           vue.createElementVNode("div", _hoisted_3$e, [
-            vue.createElementVNode("div", _hoisted_4$8, [
+            vue.createElementVNode("div", _hoisted_4$9, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ]),
-            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [
+            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$9, [
               vue.createVNode(_component_Alpha, {
                 value: _ctx.colors,
                 onChange: $options.childChange
@@ -12002,8 +11993,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$v = { class: "group-editor group-editor-background" };
   const _hoisted_2$m = { class: "flex-align-center" };
   const _hoisted_3$d = { class: "title" };
-  const _hoisted_4$7 = { class: "color" };
-  const _hoisted_5$7 = { class: "image mt-4" };
+  const _hoisted_4$8 = { class: "color" };
+  const _hoisted_5$8 = { class: "image mt-4" };
   const _hoisted_6$6 = {
     key: 0,
     class: "url mt-8"
@@ -12052,7 +12043,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ])
             ]),
             vue.createElementVNode("div", null, [
-              vue.createElementVNode("div", _hoisted_4$7, [
+              vue.createElementVNode("div", _hoisted_4$8, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.color" }]
                 ]),
@@ -12083,7 +12074,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   ]
                 ]) : vue.createCommentVNode("", true)
               ]),
-              vue.createElementVNode("div", _hoisted_5$7, [
+              vue.createElementVNode("div", _hoisted_5$8, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.image" }]
                 ]),
@@ -12122,8 +12113,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$u = { class: "group-editor group-editor-border" };
   const _hoisted_2$l = { class: "flex-align-center" };
   const _hoisted_3$c = { class: "title" };
-  const _hoisted_4$6 = { class: "" };
-  const _hoisted_5$6 = { class: "sub-title" };
+  const _hoisted_4$7 = { class: "" };
+  const _hoisted_5$7 = { class: "sub-title" };
   const _hoisted_6$5 = { class: "color" };
   const _hoisted_7$5 = { class: "mt-8" };
   const _hoisted_8$4 = { class: "sub-title" };
@@ -12183,8 +12174,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.border" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$6, [
-              vue.createElementVNode("div", _hoisted_5$6, [
+            vue.createElementVNode("div", _hoisted_4$7, [
+              vue.createElementVNode("div", _hoisted_5$7, [
                 vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                   [vue.unref(bluesea.vT), { key: "pb.prop.borderColor" }]
                 ])
@@ -12309,8 +12300,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$t = { class: "group-editor group-editor-margin" };
   const _hoisted_2$k = { class: "flex-align-center" };
   const _hoisted_3$b = { class: "title" };
-  const _hoisted_4$5 = { class: "flex-grow-1" };
-  const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_4$6 = { class: "flex-grow-1" };
+  const _hoisted_5$6 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$4 = { class: "text-center" };
   const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_8$3 = { class: "text-center" };
@@ -12345,8 +12336,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.margin" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$5, [
-              vue.createElementVNode("div", _hoisted_5$5, [
+            vue.createElementVNode("div", _hoisted_4$6, [
+              vue.createElementVNode("div", _hoisted_5$6, [
                 vue.createElementVNode("div", _hoisted_6$4, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
@@ -12397,8 +12388,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$s = { class: "group-editor group-editor-padding" };
   const _hoisted_2$j = { class: "flex-align-center" };
   const _hoisted_3$a = { class: "title" };
-  const _hoisted_4$4 = { class: "flex-grow-1" };
-  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_4$5 = { class: "flex-grow-1" };
+  const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_6$3 = { class: "text-center" };
   const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_8$2 = { class: "text-center" };
@@ -12433,8 +12424,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.padding" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$4, [
-              vue.createElementVNode("div", _hoisted_5$4, [
+            vue.createElementVNode("div", _hoisted_4$5, [
+              vue.createElementVNode("div", _hoisted_5$5, [
                 vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
@@ -12868,8 +12859,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     key: 0,
     class: "title mt-12"
   };
-  const _hoisted_4$3 = { class: "url mt-8" };
-  const _hoisted_5$3 = { class: "title mt-12" };
+  const _hoisted_4$4 = { class: "url mt-8" };
+  const _hoisted_5$4 = { class: "title mt-12" };
   const _hoisted_6$2 = { class: "title mt-12" };
   const _hoisted_7$2 = { class: "title mt-12" };
   const _hoisted_8$1 = { class: "title mt-12" };
@@ -12960,7 +12951,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ]),
           ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
             _cache[4] || (_cache[4] = vue.createElementVNode("label", null, "URL", -1)),
-            vue.createElementVNode("div", _hoisted_4$3, [
+            vue.createElementVNode("div", _hoisted_4$4, [
               vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
               vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
                 class: "border-0 mb-2 px-1",
@@ -12989,7 +12980,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             ])
           ])) : vue.createCommentVNode("", true),
           ((_c = media.value) == null ? void 0 : _c.mediaType) === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createElementVNode("div", _hoisted_5$3, [
+            vue.createElementVNode("div", _hoisted_5$4, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.altText" }]
               ])
@@ -13325,7 +13316,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ],
       initialProperties: {},
       allowsChild: () => false,
-      creator: () => PbYoutubeWidget
+      creator: () => _sfc_main$4$1
     }
     /*
      * BSP에서 사용안함
@@ -15610,6 +15601,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   });
   const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image-container {\n  margin: 0;\n  padding: 0;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
   const _hoisted_1$h = ["width"];
+  const iframeSrcdoc = "<!doctype html><html><head></head><body></body></html>";
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
     props: {
@@ -15620,41 +15612,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const props = __props;
       const pageBuilderEditor = usePageBuilderEditor();
       const iframeRef = vue.ref();
+      const ready = vue.ref(false);
       provideMouseTracker(iframeRef);
-      const stopIframeWatch = vue.watch(
-        () => {
-          var _a, _b;
-          return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
-        },
-        () => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
-          if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
-            const externalCss = pageBuilderEditor.getExternalCss();
-            const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
-            head.innerHTML = `
-          <meta charset="UTF-8"/>
-          <link
-            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
-            rel="stylesheet"/>
-          ${externalCss}
-          <style>${canvasStyle}</style>
-        `;
-            const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
-            script2.innerHTML = `
-          function forwardPostMessage(event) {
-            if (event.data) {
-              console.log(event)
-              window.parent.postMessage(event.data, '*');
-            }
-          }
-          window.addEventListener('message', forwardPostMessage);
-        `;
-            (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
-            pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
-            stopIframeWatch();
-          }
-        }
-      );
+      const onIframeLoad = () => {
+        var _a, _b;
+        if (ready.value) return;
+        const doc = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+        if (!(doc == null ? void 0 : doc.head)) return;
+        const externalCss = pageBuilderEditor.getExternalCss();
+        doc.head.innerHTML = `
+    <meta charset="UTF-8"/>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
+      rel="stylesheet"/>
+    ${externalCss}
+    <style>${canvasStyle}</style>
+  `;
+        const script2 = doc.createElement("script");
+        script2.innerHTML = `
+    function forwardPostMessage(event) {
+      if (event.data) {
+        console.log(event)
+        window.parent.postMessage(event.data, '*');
+      }
+    }
+    window.addEventListener('message', forwardPostMessage);
+  `;
+        doc.head.appendChild(script2);
+        pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(doc.body);
+        ready.value = true;
+        resizeObserver = new ResizeObserver(updateIframeHeight);
+        resizeObserver.observe(doc.body, {});
+        mutationObserver = new MutationObserver(updateIframeHeight);
+        mutationObserver.observe(doc.body, { childList: true, subtree: true });
+        updateIframeHeight();
+      };
       const width = vue.ref(props.width);
       vue.ref(200);
       const isMobilePage = vue.computed(() => width.value <= 768);
@@ -15679,15 +15671,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         });
       };
-      vue.onMounted(() => {
-        if (!iframeRef.value || !iframeRef.value.contentDocument) return;
-        const iframeBody = iframeRef.value.contentDocument.body;
-        resizeObserver = new ResizeObserver(updateIframeHeight);
-        resizeObserver.observe(iframeBody, {});
-        mutationObserver = new MutationObserver(updateIframeHeight);
-        mutationObserver.observe(iframeBody, { childList: true, subtree: true });
-        iframeRef.value.onload = updateIframeHeight;
-      });
       vue.onBeforeUnmount(() => {
         if (resizeObserver) {
           resizeObserver.disconnect();
@@ -15716,11 +15699,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           vue.createElementVNode("iframe", {
             ref_key: "iframeRef",
             ref: iframeRef,
+            srcdoc: iframeSrcdoc,
             style: vue.normalizeStyle(style.value),
             width: `${width.value}px`,
-            class: "page-frame mt-12"
-          }, null, 12, _hoisted_1$h),
-          ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            class: "page-frame mt-12",
+            onLoad: onIframeLoad
+          }, null, 44, _hoisted_1$h),
+          ready.value && ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
             key: 0,
             to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
           }, [
@@ -17578,10 +17563,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
-            id: "youtube-iframe-js-api-script",
-            src: "https://www.youtube.com/iframe_api"
-          })),
           vue.createVNode(_sfc_main$o, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_sfc_main$n, { class: "w-240 min-w-120" }),
@@ -17962,8 +17943,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     key: 0,
     class: "title mt-12"
   };
-  const _hoisted_4$2 = { class: "mt-8" };
-  const _hoisted_5$2 = { class: "title mt-12" };
+  const _hoisted_4$3 = { class: "mt-8" };
+  const _hoisted_5$3 = { class: "title mt-12" };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorImage",
     props: {
@@ -18025,7 +18006,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ]),
           ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
             _cache[0] || (_cache[0] = vue.createElementVNode("label", null, "URL", -1)),
-            vue.createElementVNode("div", _hoisted_4$2, [
+            vue.createElementVNode("div", _hoisted_4$3, [
               vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
               vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
                 class: "border-0 mb-2 px-1",
@@ -18054,7 +18035,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             ])
           ])) : vue.createCommentVNode("", true),
           ((_c = media.value) == null ? void 0 : _c.mediaType) === "Image" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createElementVNode("div", _hoisted_5$2, [
+            vue.createElementVNode("div", _hoisted_5$3, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.altText" }]
               ])
@@ -18202,7 +18183,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$3 = { class: "bs-layout-vertical flex-grow-1 h-full" };
   const _hoisted_2$3 = { class: "pt-8" };
-  const _hoisted_3$3 = { class: "bs-layout-horizontal justify-content-center" };
+  const _hoisted_3$3 = { class: "preview-wrapper" };
+  const _hoisted_4$2 = ["src"];
+  const _hoisted_5$2 = { class: "bs-layout-horizontal justify-content-center" };
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbYoutubeModal",
     props: {
@@ -18213,11 +18196,54 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const props = __props;
       const emit = __emit;
       const modalHandle = bluesea.useModalHandle();
-      const previewContainer = vue.ref();
       const url = vue.ref(props.url);
       const aspectRatio = vue.ref();
-      const previewWidth = vue.ref(480);
-      const previewHeight = vue.ref(360);
+      const extractVideoId = (raw) => {
+        const value = raw.trim();
+        if (!value) return void 0;
+        if (/^[\w-]{11}$/.test(value)) return value;
+        try {
+          const u = new URL(value);
+          const host = u.hostname.replace(/^www\./, "");
+          if (host === "youtu.be") {
+            const id = u.pathname.slice(1).split("/")[0];
+            return id || void 0;
+          }
+          if (host === "youtube.com" || host === "youtube-nocookie.com" || host === "m.youtube.com") {
+            const v = u.searchParams.get("v");
+            if (v) return v;
+            const segs = u.pathname.split("/").filter(Boolean);
+            const idx = segs.findIndex((s) => s === "embed" || s === "shorts" || s === "live" || s === "v");
+            if (idx >= 0 && segs[idx + 1]) return segs[idx + 1];
+          }
+        } catch {
+        }
+        return void 0;
+      };
+      const embedSrc = vue.computed(() => {
+        if (!url.value) return void 0;
+        const id = extractVideoId(url.value);
+        if (!id) return void 0;
+        return `https://www.youtube-nocookie.com/embed/${id}`;
+      });
+      const aspectRatioCss = vue.computed(() => {
+        const raw = aspectRatio.value;
+        if (raw) {
+          const parts = raw.split("/");
+          if (parts.length === 2) {
+            const w = Number(parts[0]);
+            const h = Number(parts[1]);
+            if (w > 0 && h > 0) return `${w} / ${h}`;
+          }
+        }
+        return "16 / 9";
+      });
+      const iframeStyle = vue.computed(() => ({
+        width: "100%",
+        aspectRatio: aspectRatioCss.value,
+        border: "0",
+        display: "block"
+      }));
       const fetchAspectRatio = async (videoUrl) => {
         try {
           const oembedUrl = `https://www.youtube.com/oembed?url=${encodeURIComponent(videoUrl)}&format=json`;
@@ -18226,7 +18252,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           const data = await response.json();
           if (data.width && data.height) {
             aspectRatio.value = `${data.width}/${data.height}`;
-            previewHeight.value = Math.round(previewWidth.value * data.height / data.width);
           }
         } catch {
         }
@@ -18241,21 +18266,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (props.url) {
         fetchAspectRatio(props.url);
       }
-      const measureContainer = () => {
-        var _a;
-        const w = (_a = previewContainer.value) == null ? void 0 : _a.clientWidth;
-        if (w && w > 0) {
-          previewWidth.value = w;
-          previewHeight.value = Math.round(w * 9 / 16);
-          return true;
-        }
-        return false;
-      };
-      vue.onMounted(() => {
-        if (!measureContainer()) {
-          requestAnimationFrame(() => measureContainer());
-        }
-      });
       const ok = () => {
         emit("selectUrl", url.value, aspectRatio.value);
         modalHandle.close();
@@ -18278,24 +18288,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               vue.withDirectives(vue.createElementVNode("div", _hoisted_2$3, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.modal.youtube.preview" }]
               ]),
-              vue.createElementVNode("div", {
-                ref_key: "previewContainer",
-                ref: previewContainer,
-                class: "preview-container border-w-1 border border-gray",
-                style: vue.normalizeStyle({ minHeight: url.value ? void 0 : "300px", overflow: "hidden" })
-              }, [
-                url.value ? (vue.openBlock(), vue.createBlock(vue.unref(YouTube), {
+              vue.createElementVNode("div", _hoisted_3$3, [
+                embedSrc.value ? (vue.openBlock(), vue.createElementBlock("iframe", {
                   key: 0,
-                  ref: "youtube",
-                  src: url.value,
-                  width: previewWidth.value,
-                  height: previewHeight.value
-                }, null, 8, ["src", "width", "height"])) : vue.createCommentVNode("", true)
-              ], 4)
+                  src: embedSrc.value,
+                  style: vue.normalizeStyle(iframeStyle.value),
+                  frameborder: "0",
+                  referrerpolicy: "strict-origin-when-cross-origin",
+                  allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share",
+                  allowfullscreen: "",
+                  loading: "lazy",
+                  title: "YouTube preview"
+                }, null, 12, _hoisted_4$2)) : (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 1,
+                  class: "preview-empty border-w-1 border border-gray",
+                  style: vue.normalizeStyle({ aspectRatio: aspectRatioCss.value })
+                }, null, 4))
+              ])
             ])
           ]),
           buttons: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_3$3, [
+            vue.createElementVNode("div", _hoisted_5$2, [
               vue.withDirectives(vue.createElementVNode("button", {
                 class: "mr-4",
                 onClick: ok
@@ -18309,7 +18322,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const PbYoutubeModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c0ba6980"]]);
+  const PbYoutubeModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-b8f2a18d"]]);
   const PbYoutubeModal$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: PbYoutubeModal
@@ -18667,7 +18680,7 @@ ${_html.tags}` : "";
   exports2.PbIframeWidget = _sfc_main$5$1;
   exports2.PbMediaWidget = _sfc_main$8$1;
   exports2.PbTextWidget = _sfc_main$7$1;
-  exports2.PbYoutubeWidget = PbYoutubeWidget;
+  exports2.PbYoutubeWidget = _sfc_main$4$1;
   exports2.ROOT_TYPE = ROOT_TYPE$1;
   exports2.RootPart = RootPart;
   exports2.SECTION_TYPE = SECTION_TYPE$1;