embedia-vue - npm Package Compare versions

Comparing version 1.2.3 to 1.2.5-alpha.1

dist/index.es.js

@@ -1,109 +0,140 @@
-import { ref as p, onMounted as w, watch as f, openBlock as y, createElementBlock as b, normalizeClass as g, normalizeStyle as v, pushScopeId as $, popScopeId as E, createElementVNode as U } from "vue";
-let u = 1;
-const C = (e, t, o, s) => {
-  const r = e.videoUrl, i = Number(e.width) + 140, c = I(r);
+import { ref as b, onMounted as v, watch as E, openBlock as $, createElementBlock as x, normalizeClass as C, normalizeStyle as I, pushScopeId as U, popScopeId as _, createElementVNode as k } from "vue";
+let p = 1;
+const T = (e, t, o, s) => {
+  const r = e.videoUrl;
+  let l, n;
+  e.width == "", n = 370, e.height == "", l = 505;
+  const c = V(r);
   if (!c)
     throw new Error("Invalid Instagram video URL");
-  let n = document.getElementById(t);
-  n || (n = document.createElement("div"), n.id = t, document.body.appendChild(n));
-  let a = document.querySelector(`.${o}`);
-  a || (a = document.createElement("div"), a.className = `video-${s} ${o}`, n.appendChild(a));
-  const l = document.createElement("blockquote");
-  l.className = "instagram-media", l.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${c}/`), l.setAttribute("data-instgrm-version", "13"), l.style.width = `${e.width}px`, l.style.height = `${i}px`, l.style.maxWidth = "380px", l.style.maxheight = "520px";
-  const d = document.createElement("a");
-  if (d.href = r, l.appendChild(d), a.appendChild(l), !document.getElementById("instagramEmbedScript")) {
-    const m = document.createElement("script");
-    m.async = !0, m.id = "instagramEmbedScript", m.src = "//www.instagram.com/embed.js", n.appendChild(m);
+  let i = document.getElementById(t);
+  i || (i = document.createElement("div"), i.id = t, document.body.appendChild(i));
+  let d = document.querySelector(`.${o}`);
+  d || (d = document.createElement("div"), d.className = `video-${s} ${o}`, i.appendChild(d));
+  const a = document.createElement("blockquote");
+  a.className = "instagram-media", a.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${c}/`), a.setAttribute("data-instgrm-version", "13"), a.style.width = `${n}px`, a.style.height = `${l}px`, a.style.maxWidth = "380px", a.style.maxheight = "510px";
+  const m = document.createElement("a");
+  if (m.href = r, a.appendChild(m), d.appendChild(a), !document.getElementById("instagramEmbedScript")) {
+    const u = document.createElement("script");
+    u.async = !0, u.id = "instagramEmbedScript", u.src = "//www.instagram.com/embed.js", i.appendChild(u);
   }
-}, I = (e) => {
+}, V = (e) => {
   const t = /\/([a-zA-Z0-9_-]+)\/?$/, o = e.match(t);
   return o ? o[1] : null;
-}, _ = (e) => {
-  const t = e.match(/\/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
+}, S = (e) => {
+  const t = e.match(/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
   if (t && t[1])
     return t[1];
   throw new Error("Invalid Dailymotion video URL");
-}, k = (e, t, o) => {
-  const s = e.videoUrl, r = _(s), i = e.autoplay ? "1" : "0", c = e.controls ? "1" : "0", n = e.fullscreen ? "1" : "0", a = document.createElement("iframe");
-  a.src = `https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${c}&fullscreen=${n}`, a.width = e.width || 640, a.height = e.height || 360, a.frameBorder = "0", a.allowFullscreen = !0, a.className = o, t.appendChild(a);
-}, x = (e) => {
+}, R = (e, t, o) => {
+  const s = e.videoUrl, r = S(s), l = e.width || 640, n = e.height || 360;
+  window.handleDailymotionResponse = (i) => {
+    if (console.log("Dailymotion Response:", i), i.html) {
+      const d = document.createElement("div");
+      d.className = `${o} custom-dailymotion`, d.innerHTML = i.html;
+      const a = d.querySelector("iframe");
+      if (a) {
+        a.style.width = `${l}px`, a.style.height = `${n}px`;
+        const m = a.getAttribute("allow");
+        m ? a.setAttribute("allow", m.replace("autoplay", "")) : a.setAttribute("allow", "fullscreen; picture-in-picture; muted");
+      }
+      t.appendChild(d);
+    }
+  };
+  const c = document.createElement("script");
+  c.src = `https://www.dailymotion.com/services/oembed?url=https://www.dailymotion.com/video/${r}&maxwidth=${l}&maxheight=${n}&format=json&callback=handleDailymotionResponse`, document.body.appendChild(c);
+}, L = (e) => {
   const t = e.match(/\/(\d+)/);
   return t && t[1] ? t[1] : (console.error("Invalid Vimeo video URL"), "");
-}, T = (e, t, o) => {
-  const s = e.width || 640, r = e.height || 360, i = e.controls, c = e.autoplay === "true", n = e.loop === "true", a = x(e.videoUrl), l = document.createElement("div");
-  l.className = `video-${u} ${o}`, l.dataset.eWidth = s, l.dataset.eHeight = r, l.dataset.efullscreen = e.fullscreen, l.dataset.eVideoId = a, t.appendChild(l);
-  const d = document.createElement("script");
-  return d.src = "https://player.vimeo.com/api/player.js", d.async = !0, d.onload = () => {
-    new window.Vimeo.Player(l, {
-      id: a,
+}, N = (e, t, o) => {
+  const s = e.width || 640, r = e.height || 360, l = e.controls !== void 0 ? e.controls : !0, n = e.autoplay === !0, c = e.loop === "true", i = e.fullscreen === !0, d = L(e.videoUrl), a = document.createElement("div");
+  a.className = `video-${d} ${o}`, a.dataset.eWidth = s, a.dataset.eHeight = r, a.dataset.efullscreen = i, a.dataset.eVideoId = d, t.appendChild(a);
+  const m = document.createElement("script");
+  return m.src = "https://player.vimeo.com/api/player.js", m.async = !0, m.onload = () => {
+    new window.Vimeo.Player(a, {
+      id: d,
       width: s,
       height: r,
-      controls: i,
-      autoplay: c,
-      muted: c,
-      loop: n
-      // Set loop based on boolean value
+      controls: l,
+      // Show controls
+      autoplay: n,
+      // Autoplay based on the passed value (true/false)
+      muted: n,
+      // Mute if autoplay is true (to comply with browser restrictions)
+      loop: c,
+      // Loop based on the loop value
+      fullscreen: i
     }).ready().then(() => {
+      if (console.log("Vimeo player is ready"), i === !1) {
+        const h = a.querySelector("iframe"), y = h.contentDocument || h.contentWindow.document, g = setInterval(() => {
+          const f = y.querySelector(".vimeo-control-bar .fullscreen");
+          f && (f.style.display = "none", clearInterval(g));
+        }, 100);
+      }
+    }).catch((h) => {
+      console.error("Error loading Vimeo player:", h);
     });
-  }, document.body.appendChild(d), () => {
-    l && (l.innerHTML = ""), document.body.removeChild(d);
+  }, document.body.appendChild(m), () => {
+    a && (a.innerHTML = ""), m && m.parentNode && document.body.removeChild(m);
   };
-}, V = (e, t, o) => {
+}, A = (e, t, o) => {
   const s = (r) => {
-    const i = /\/status\/(\d+)/, c = r.match(i);
-    return c && c[1] ? c[1] : null;
+    const l = /\/status\/(\d+)/, n = r.match(l);
+    return n && n[1] ? n[1] : null;
   };
   try {
-    const r = e.videoUrl, i = s(r), c = document.createElement("div");
-    c.className = `video-${u} ${o}`, c.id = `tweet-${i}`;
-    const n = document.createElement("script");
-    n.src = "https://platform.twitter.com/widgets.js", n.charset = "utf-8", n.async = !0, n.addEventListener("load", () => {
-      window.twttr.widgets.createTweet(i, c);
-    }), t.appendChild(c), t.appendChild(n);
+    const r = e.videoUrl, l = s(r), n = document.createElement("div");
+    n.className = `video-${p} ${o}`, n.id = `tweet-${l}`;
+    const c = document.createElement("script");
+    c.src = "https://platform.twitter.com/widgets.js", c.charset = "utf-8", c.async = !0, c.addEventListener("load", () => {
+      window.twttr.widgets.createTweet(l, n);
+    }), t.appendChild(n), t.appendChild(c);
   } catch (r) {
     console.error("Error embedding Twitter content:", r);
   }
-}, S = (e, t, o) => {
+}, q = (e, t, o) => {
   const s = (r) => {
-    const i = /\/status\/(\d+)/, c = r.match(i);
-    return c ? c[1] : null;
+    const l = /\/status\/(\d+)/, n = r.match(l);
+    return n ? n[1] : null;
   };
   try {
-    const r = e.videoUrl, i = s(r);
-    if (!i)
+    const r = e.videoUrl, l = s(r);
+    if (!l)
       throw new Error("Invalid video URL");
-    const c = document.createElement("div");
-    c.className = `video-${u} ${o}`, c.id = `tweet-${i}`;
-    const n = document.createElement("script");
-    n.src = "https://platform.twitter.com/widgets.js", n.charset = "utf-8", n.async = !0, n.addEventListener("load", () => {
-      window.twttr.widgets.createTweet(i, c);
-    }), t.appendChild(c), t.appendChild(n);
+    const n = document.createElement("div");
+    n.className = `video-${p} ${o}`, n.id = `tweet-${l}`;
+    const c = document.createElement("script");
+    c.src = "https://platform.twitter.com/widgets.js", c.charset = "utf-8", c.async = !0, c.addEventListener("load", () => {
+      window.twttr.widgets.createTweet(l, n);
+    }), t.appendChild(n), t.appendChild(c);
   } catch (r) {
     console.error("Error embedding Twitter content:", r);
   }
-}, h = /* @__PURE__ */ new Map(), A = (e, t, o) => {
+}, w = /* @__PURE__ */ new Map(), D = (e, t, o) => {
   const s = e.videoUrl;
-  if (h.has(s) || h.has(s))
+  if (w.has(s) || w.has(s))
     return;
-  h.set(s, !0);
-  const r = e.width || "100%", i = e.height || "100%", c = new XMLHttpRequest();
-  c.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`, !0), c.onload = function() {
-    if (c.status >= 200 && c.status < 300) {
-      const n = JSON.parse(c.responseText);
-      n.html && (n.html = n.html.replace(/<script[^>]*>.*<\/script>/gi, ""));
-      const a = document.createElement("div"), l = Date.now();
-      if (a.className = `video-${l} ${o}`, a.style.width = r, a.style.height = i, a.innerHTML = n.html, !document.querySelector('script[src="https://www.tiktok.com/embed.js"]')) {
-        const d = document.createElement("script");
-        d.src = "https://www.tiktok.com/embed.js", document.body.appendChild(d);
+  w.set(s, !0);
+  const r = e.width || "100%", l = e.height || "100%", n = new XMLHttpRequest();
+  n.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`, !0), n.onload = function() {
+    if (n.status >= 200 && n.status < 300) {
+      const c = JSON.parse(n.responseText);
+      c.html && (c.html = c.html.replace(/<script[^>]*>.*<\/script>/gi, ""));
+      const i = document.createElement("div"), d = Date.now();
+      if (i.className = `video-${d} ${o}`, i.style.width = r, i.style.height = l, i.innerHTML = c.html, !document.querySelector('script[src="https://www.tiktok.com/embed.js"]')) {
+        const a = document.createElement("script");
+        a.src = "https://www.tiktok.com/embed.js", document.body.appendChild(a);
       }
-      t ? t.appendChild(a) : document.body && document.body.appendChild(a);
+      t ? t.appendChild(i) : document.body && document.body.appendChild(i);
     } else
-      console.error("Failed to fetch TikTok oEmbed data: " + c.statusText);
-  }, c.onerror = function() {
+      console.error("Failed to fetch TikTok oEmbed data: " + n.statusText);
+  }, n.onerror = function() {
     console.error("An error occurred while embedding TikTok video.");
-  }, c.send();
-}, N = (e, t, o) => {
-  const s = e.videoUrl, r = e.autoplay ? "autoplay=true" : "autoplay=false", i = r ? "muted=true" : "muted=false", c = e.width || 640, n = e.height || 360, a = document.createElement("iframe");
-  a.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${c}&height=${n}&show_text=false&${r}&${i}`), a.setAttribute("width", c), a.setAttribute("height", n), a.setAttribute("frameborder", "0"), e.fullscreen && a.setAttribute("allowfullscreen", "true"), a.className = `video-${u} ${o} custom-facebook`, u++, t.appendChild(a);
-}, R = (e) => {
+  }, n.send();
+}, B = (e, t, o) => {
+  const s = e.videoUrl, r = e.autoplay ?? !0, l = r, n = e.width || 640, c = e.height || 360, i = new URL("https://www.facebook.com/plugins/video.php");
+  i.searchParams.set("href", s), i.searchParams.set("width", n), i.searchParams.set("height", c), i.searchParams.set("show_text", "false"), i.searchParams.set("autoplay", r ? "true" : "false"), i.searchParams.set("muted", l ? "1" : "0");
+  const d = document.createElement("iframe");
+  d.src = i.toString(), d.width = n, d.height = c, d.frameBorder = "0", d.allow = "autoplay; fullscreen", d.allowFullscreen = e.fullscreen !== !1, d.className = `video-${p} ${o} custom-facebook`, p++, t.appendChild(d);
+}, M = (e) => {
   const t = e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
@@ -116,3 +147,3 @@ if (t && t[1])
   throw new Error("Invalid YouTube video URL");
-}, L = (e, t, o) => {
+}, P = (e, t, o) => {
   if (!t) {
@@ -122,5 +153,5 @@ console.error("Container element not found.");
   }
-  const s = e.autoplay ? 1 : 0, r = e.autoplay || e.muted ? 1 : 0, i = e.autoplay || e.loop ? 1 : 0, c = R(e.videoUrl), n = document.createElement("iframe");
-  n.src = `https://www.youtube.com/embed/${c}?autoplay=${s}&mute=${r}&loop=${i ? 1 : 0}&controls=${e.controls ? 1 : 0}`, n.width = e.width || 640, n.height = e.height || 360, n.frameborder = "0", n.style.border = "none", e.fullscreen && n.setAttribute("allow", "fullscreen"), n.className = o, t.appendChild(n);
-}, B = (e) => {
+  const s = e.autoplay ? 1 : 0, r = e.autoplay || e.muted ? 1 : 0, l = e.autoplay || e.loop ? 1 : 0, n = M(e.videoUrl), c = document.createElement("iframe");
+  c.src = `https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${l ? 1 : 0}&controls=${e.controls ? 1 : 0}`, c.width = e.width || 640, c.height = e.height || 360, c.frameborder = "0", c.style.border = "none", e.fullscreen && c.setAttribute("allow", "fullscreen"), c.className = o, t.appendChild(c);
+}, j = (e) => {
   var s;
@@ -149,21 +180,21 @@ const t = ((s = e.cssname) == null ? void 0 : s.trim()) || "";
   if (e.videoUrl.includes("youtube.com") || e.videoUrl.includes("youtu.be"))
-    L(e, o, t);
+    P(e, o, t);
   else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com"))
-    N(e, o, t);
+    B(e, o, t);
   else if (e.videoUrl.includes("tiktok.com") || e.videoUrl.includes("tiktok"))
+    D(e, o, t);
+  else if (e.videoUrl.includes("twitter.com"))
     A(e, o, t);
-  else if (e.videoUrl.includes("twitter.com"))
-    V(e, o, t);
   else if (e.videoUrl.includes("x.com"))
-    S(e, o, t);
+    q(e, o, t);
   else if (e.videoUrl.includes("vimeo.com"))
-    T(e, o, t);
+    N(e, o, t);
   else if (e.videoUrl.includes("dailymotion.com") || e.videoUrl.includes("dailymotion"))
-    k(e, o, t);
+    R(e, o, t);
   else if (e.videoUrl.includes("instagram.com") || e.videoUrl.includes("instagram"))
-    C(e, o, t);
+    T(e, o, t);
   else
     throw new Error("Invalid video URL");
 };
-const M = (e, t) => {
+const W = (e, t) => {
   const o = e.__vccOpts || e;
@@ -173,3 +204,3 @@ for (const [s, r] of t)
   return o;
-}, q = {
+}, H = {
   name: "EmbediaVue",
@@ -207,5 +238,5 @@ props: {
   setup(e) {
-    const t = p("56.25%");
-    w(() => {
-      B({
+    const t = b("56.25%");
+    v(() => {
+      j({
         videoUrl: e.clip,
@@ -219,3 +250,3 @@ width: e.width,
       }), o(e.width, e.height);
-    }), f(() => [e.width, e.height], ([s, r]) => {
+    }), E(() => [e.width, e.height], ([s, r]) => {
       o(s, r);
@@ -230,14 +261,14 @@ }, { immediate: !0 });
   }
-}, j = (e) => ($("data-v-d26b150f"), e = e(), E(), e), W = /* @__PURE__ */ j(() => /* @__PURE__ */ U("div", { class: "video-content" }, null, -1)), z = [
-  W
+}, z = (e) => (U("data-v-d26b150f"), e = e(), _(), e), F = /* @__PURE__ */ z(() => /* @__PURE__ */ k("div", { class: "video-content" }, null, -1)), Y = [
+  F
 ];
-function D(e, t, o, s, r, i) {
-  return y(), b("div", {
-    class: g([o.cssname, "responsive-container"]),
-    style: v({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" })
-  }, z, 6);
+function Z(e, t, o, s, r, l) {
+  return $(), x("div", {
+    class: C([o.cssname, "responsive-container"]),
+    style: I({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" })
+  }, Y, 6);
 }
-const F = /* @__PURE__ */ M(q, [["render", D], ["__scopeId", "data-v-d26b150f"]]);
+const X = /* @__PURE__ */ W(H, [["render", Z], ["__scopeId", "data-v-d26b150f"]]);
 export {
-  F as EmbediaVue
+  X as EmbediaVue
 };

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue");let h=1;const w=(e,t,o,s)=>{const r=e.videoUrl,i=Number(e.width)+140,c=f(r);if(!c)throw new Error("Invalid Instagram video URL");let n=document.getElementById(t);n||(n=document.createElement("div"),n.id=t,document.body.appendChild(n));let a=document.querySelector(`.${o}`);a||(a=document.createElement("div"),a.className=`video-${s} ${o}`,n.appendChild(a));const l=document.createElement("blockquote");l.className="instagram-media",l.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${c}/`),l.setAttribute("data-instgrm-version","13"),l.style.width=`${e.width}px`,l.style.height=`${i}px`,l.style.maxWidth="380px",l.style.maxheight="520px";const d=document.createElement("a");if(d.href=r,l.appendChild(d),a.appendChild(l),!document.getElementById("instagramEmbedScript")){const u=document.createElement("script");u.async=!0,u.id="instagramEmbedScript",u.src="//www.instagram.com/embed.js",n.appendChild(u)}},f=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},y=e=>{const t=e.match(/\/(?:video|hub)\/([^_]+)/)||e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);if(t&&t[1])return t[1];throw new Error("Invalid Dailymotion video URL")},b=(e,t,o)=>{const s=e.videoUrl,r=y(s),i=e.autoplay?"1":"0",c=e.controls?"1":"0",n=e.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${c}&fullscreen=${n}`,a.width=e.width||640,a.height=e.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=o,t.appendChild(a)},g=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},v=(e,t,o)=>{const s=e.width||640,r=e.height||360,i=e.controls,c=e.autoplay==="true",n=e.loop==="true",a=g(e.videoUrl),l=document.createElement("div");l.className=`video-${h} ${o}`,l.dataset.eWidth=s,l.dataset.eHeight=r,l.dataset.efullscreen=e.fullscreen,l.dataset.eVideoId=a,t.appendChild(l);const d=document.createElement("script");return d.src="https://player.vimeo.com/api/player.js",d.async=!0,d.onload=()=>{new window.Vimeo.Player(l,{id:a,width:s,height:r,controls:i,autoplay:c,muted:c,loop:n}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},$=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,c=r.match(i);return c&&c[1]?c[1]:null};try{const r=e.videoUrl,i=s(r),c=document.createElement("div");c.className=`video-${h} ${o}`,c.id=`tweet-${i}`;const n=document.createElement("script");n.src="https://platform.twitter.com/widgets.js",n.charset="utf-8",n.async=!0,n.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,c)}),t.appendChild(c),t.appendChild(n)}catch(r){console.error("Error embedding Twitter content:",r)}},E=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,c=r.match(i);return c?c[1]:null};try{const r=e.videoUrl,i=s(r);if(!i)throw new Error("Invalid video URL");const c=document.createElement("div");c.className=`video-${h} ${o}`,c.id=`tweet-${i}`;const n=document.createElement("script");n.src="https://platform.twitter.com/widgets.js",n.charset="utf-8",n.async=!0,n.addEventListener("load",()=>{window.twttr.widgets.createTweet(i,c)}),t.appendChild(c),t.appendChild(n)}catch(r){console.error("Error embedding Twitter content:",r)}},p=new Map,U=(e,t,o)=>{const s=e.videoUrl;if(p.has(s)||p.has(s))return;p.set(s,!0);const r=e.width||"100%",i=e.height||"100%",c=new XMLHttpRequest;c.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`,!0),c.onload=function(){if(c.status>=200&&c.status<300){const n=JSON.parse(c.responseText);n.html&&(n.html=n.html.replace(/<script[^>]*>.*<\/script>/gi,""));const a=document.createElement("div"),l=Date.now();if(a.className=`video-${l} ${o}`,a.style.width=r,a.style.height=i,a.innerHTML=n.html,!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')){const d=document.createElement("script");d.src="https://www.tiktok.com/embed.js",document.body.appendChild(d)}t?t.appendChild(a):document.body&&document.body.appendChild(a)}else console.error("Failed to fetch TikTok oEmbed data: "+c.statusText)},c.onerror=function(){console.error("An error occurred while embedding TikTok video.")},c.send()},C=(e,t,o)=>{const s=e.videoUrl,r=e.autoplay?"autoplay=true":"autoplay=false",i=r?"muted=true":"muted=false",c=e.width||640,n=e.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${c}&height=${n}&show_text=false&${r}&${i}`),a.setAttribute("width",c),a.setAttribute("height",n),a.setAttribute("frameborder","0"),e.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${h} ${o} custom-facebook`,h++,t.appendChild(a)},I=e=>{const t=e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);if(t&&t[1])return t[1];const o=e.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);if(o&&o[2].length===11)return o[2];throw new Error("Invalid YouTube video URL")},_=(e,t,o)=>{if(!t){console.error("Container element not found.");return}const s=e.autoplay?1:0,r=e.autoplay||e.muted?1:0,i=e.autoplay||e.loop?1:0,c=I(e.videoUrl),n=document.createElement("iframe");n.src=`https://www.youtube.com/embed/${c}?autoplay=${s}&mute=${r}&loop=${i?1:0}&controls=${e.controls?1:0}`,n.width=e.width||640,n.height=e.height||360,n.frameborder="0",n.style.border="none",e.fullscreen&&n.setAttribute("allow","fullscreen"),n.className=o,t.appendChild(n)},k=e=>{var s;const t=((s=e.cssname)==null?void 0:s.trim())||"";if(!t.match(/^[a-zA-Z_][\w-]*$/))throw console.error("Invalid class name:",t),new Error("Invalid class name");if(!document.querySelector(`#default-style-${t}`)){const r=document.createElement("style");r.id=`default-style-${t}`,r.textContent=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue");let w=1;const v=(e,t,o,s)=>{const r=e.videoUrl;let l,n;e.width=="",n=370,e.height=="",l=505;const c=E(r);if(!c)throw new Error("Invalid Instagram video URL");let i=document.getElementById(t);i||(i=document.createElement("div"),i.id=t,document.body.appendChild(i));let d=document.querySelector(`.${o}`);d||(d=document.createElement("div"),d.className=`video-${s} ${o}`,i.appendChild(d));const a=document.createElement("blockquote");a.className="instagram-media",a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${c}/`),a.setAttribute("data-instgrm-version","13"),a.style.width=`${n}px`,a.style.height=`${l}px`,a.style.maxWidth="380px",a.style.maxheight="510px";const m=document.createElement("a");if(m.href=r,a.appendChild(m),d.appendChild(a),!document.getElementById("instagramEmbedScript")){const h=document.createElement("script");h.async=!0,h.id="instagramEmbedScript",h.src="//www.instagram.com/embed.js",i.appendChild(h)}},E=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},$=e=>{const t=e.match(/(?:video|hub)\/([^_]+)/)||e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);if(t&&t[1])return t[1];throw new Error("Invalid Dailymotion video URL")},C=(e,t,o)=>{const s=e.videoUrl,r=$(s),l=e.width||640,n=e.height||360;window.handleDailymotionResponse=i=>{if(console.log("Dailymotion Response:",i),i.html){const d=document.createElement("div");d.className=`${o} custom-dailymotion`,d.innerHTML=i.html;const a=d.querySelector("iframe");if(a){a.style.width=`${l}px`,a.style.height=`${n}px`;const m=a.getAttribute("allow");m?a.setAttribute("allow",m.replace("autoplay","")):a.setAttribute("allow","fullscreen; picture-in-picture; muted")}t.appendChild(d)}};const c=document.createElement("script");c.src=`https://www.dailymotion.com/services/oembed?url=https://www.dailymotion.com/video/${r}&maxwidth=${l}&maxheight=${n}&format=json&callback=handleDailymotionResponse`,document.body.appendChild(c)},I=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},U=(e,t,o)=>{const s=e.width||640,r=e.height||360,l=e.controls!==void 0?e.controls:!0,n=e.autoplay===!0,c=e.loop==="true",i=e.fullscreen===!0,d=I(e.videoUrl),a=document.createElement("div");a.className=`video-${d} ${o}`,a.dataset.eWidth=s,a.dataset.eHeight=r,a.dataset.efullscreen=i,a.dataset.eVideoId=d,t.appendChild(a);const m=document.createElement("script");return m.src="https://player.vimeo.com/api/player.js",m.async=!0,m.onload=()=>{new window.Vimeo.Player(a,{id:d,width:s,height:r,controls:l,autoplay:n,muted:n,loop:c,fullscreen:i}).ready().then(()=>{if(console.log("Vimeo player is ready"),i===!1){const p=a.querySelector("iframe"),g=p.contentDocument||p.contentWindow.document,b=setInterval(()=>{const y=g.querySelector(".vimeo-control-bar .fullscreen");y&&(y.style.display="none",clearInterval(b))},100)}}).catch(p=>{console.error("Error loading Vimeo player:",p)})},document.body.appendChild(m),()=>{a&&(a.innerHTML=""),m&&m.parentNode&&document.body.removeChild(m)}},x=(e,t,o)=>{const s=r=>{const l=/\/status\/(\d+)/,n=r.match(l);return n&&n[1]?n[1]:null};try{const r=e.videoUrl,l=s(r),n=document.createElement("div");n.className=`video-${w} ${o}`,n.id=`tweet-${l}`;const c=document.createElement("script");c.src="https://platform.twitter.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.createTweet(l,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},_=(e,t,o)=>{const s=r=>{const l=/\/status\/(\d+)/,n=r.match(l);return n?n[1]:null};try{const r=e.videoUrl,l=s(r);if(!l)throw new Error("Invalid video URL");const n=document.createElement("div");n.className=`video-${w} ${o}`,n.id=`tweet-${l}`;const c=document.createElement("script");c.src="https://platform.twitter.com/widgets.js",c.charset="utf-8",c.async=!0,c.addEventListener("load",()=>{window.twttr.widgets.createTweet(l,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},f=new Map,k=(e,t,o)=>{const s=e.videoUrl;if(f.has(s)||f.has(s))return;f.set(s,!0);const r=e.width||"100%",l=e.height||"100%",n=new XMLHttpRequest;n.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(s)}`,!0),n.onload=function(){if(n.status>=200&&n.status<300){const c=JSON.parse(n.responseText);c.html&&(c.html=c.html.replace(/<script[^>]*>.*<\/script>/gi,""));const i=document.createElement("div"),d=Date.now();if(i.className=`video-${d} ${o}`,i.style.width=r,i.style.height=l,i.innerHTML=c.html,!document.querySelector('script[src="https://www.tiktok.com/embed.js"]')){const a=document.createElement("script");a.src="https://www.tiktok.com/embed.js",document.body.appendChild(a)}t?t.appendChild(i):document.body&&document.body.appendChild(i)}else console.error("Failed to fetch TikTok oEmbed data: "+n.statusText)},n.onerror=function(){console.error("An error occurred while embedding TikTok video.")},n.send()},T=(e,t,o)=>{const s=e.videoUrl,r=e.autoplay??!0,l=r,n=e.width||640,c=e.height||360,i=new URL("https://www.facebook.com/plugins/video.php");i.searchParams.set("href",s),i.searchParams.set("width",n),i.searchParams.set("height",c),i.searchParams.set("show_text","false"),i.searchParams.set("autoplay",r?"true":"false"),i.searchParams.set("muted",l?"1":"0");const d=document.createElement("iframe");d.src=i.toString(),d.width=n,d.height=c,d.frameBorder="0",d.allow="autoplay; fullscreen",d.allowFullscreen=e.fullscreen!==!1,d.className=`video-${w} ${o} custom-facebook`,w++,t.appendChild(d)},S=e=>{const t=e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);if(t&&t[1])return t[1];const o=e.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);if(o&&o[2].length===11)return o[2];throw new Error("Invalid YouTube video URL")},V=(e,t,o)=>{if(!t){console.error("Container element not found.");return}const s=e.autoplay?1:0,r=e.autoplay||e.muted?1:0,l=e.autoplay||e.loop?1:0,n=S(e.videoUrl),c=document.createElement("iframe");c.src=`https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${l?1:0}&controls=${e.controls?1:0}`,c.width=e.width||640,c.height=e.height||360,c.frameborder="0",c.style.border="none",e.fullscreen&&c.setAttribute("allow","fullscreen"),c.className=o,t.appendChild(c)},R=e=>{var s;const t=((s=e.cssname)==null?void 0:s.trim())||"";if(!t.match(/^[a-zA-Z_][\w-]*$/))throw console.error("Invalid class name:",t),new Error("Invalid class name");if(!document.querySelector(`#default-style-${t}`)){const r=document.createElement("style");r.id=`default-style-${t}`,r.textContent=`
             .${t} {
@@ -10,2 +10,2 @@ display: flex;
             }
-          `,document.head.appendChild(r)}const o=document.querySelector(`.${t}`);if(!o)throw console.error("Container not found for class:",t),new Error("Container not found");for(;o.firstChild;)o.removeChild(o.firstChild);if(e.videoUrl.includes("youtube.com")||e.videoUrl.includes("youtu.be"))_(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))C(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))U(e,o,t);else if(e.videoUrl.includes("twitter.com"))$(e,o,t);else if(e.videoUrl.includes("x.com"))E(e,o,t);else if(e.videoUrl.includes("vimeo.com"))v(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))b(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))w(e,o,t);else throw new Error("Invalid video URL")};const x=(e,t)=>{const o=e.__vccOpts||e;for(const[s,r]of t)o[s]=r;return o},T={name:"EmbediaVue",props:{clip:{type:String,required:!0},width:{type:[Number,String],default:640},height:{type:[Number,String],default:""},autoplay:{type:Boolean,default:!1},fullscreen:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},cssname:{type:String,default:"default-video-class"}},setup(e){const t=m.ref("56.25%");m.onMounted(()=>{k({videoUrl:e.clip,width:e.width,height:e.height,autoplay:e.autoplay,fullscreen:e.fullscreen,controls:e.controls,cssname:e.cssname}),o(e.width,e.height)}),m.watch(()=>[e.width,e.height],([s,r])=>{o(s,r)},{immediate:!0});function o(s,r){s&&r?t.value=`${r/s*100}%`:t.value="56.25%"}return{aspectRatio:t}}},V=e=>(m.pushScopeId("data-v-d26b150f"),e=e(),m.popScopeId(),e),S=V(()=>m.createElementVNode("div",{class:"video-content"},null,-1)),A=[S];function N(e,t,o,s,r,i){return m.openBlock(),m.createElementBlock("div",{class:m.normalizeClass([o.cssname,"responsive-container"]),style:m.normalizeStyle({"--aspect-ratio":s.aspectRatio,width:"auto",maxWidth:"100%"})},A,6)}const R=x(T,[["render",N],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=R;
+          `,document.head.appendChild(r)}const o=document.querySelector(`.${t}`);if(!o)throw console.error("Container not found for class:",t),new Error("Container not found");for(;o.firstChild;)o.removeChild(o.firstChild);if(e.videoUrl.includes("youtube.com")||e.videoUrl.includes("youtu.be"))V(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))T(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))k(e,o,t);else if(e.videoUrl.includes("twitter.com"))x(e,o,t);else if(e.videoUrl.includes("x.com"))_(e,o,t);else if(e.videoUrl.includes("vimeo.com"))U(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))C(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))v(e,o,t);else throw new Error("Invalid video URL")};const L=(e,t)=>{const o=e.__vccOpts||e;for(const[s,r]of t)o[s]=r;return o},N={name:"EmbediaVue",props:{clip:{type:String,required:!0},width:{type:[Number,String],default:640},height:{type:[Number,String],default:""},autoplay:{type:Boolean,default:!1},fullscreen:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},cssname:{type:String,default:"default-video-class"}},setup(e){const t=u.ref("56.25%");u.onMounted(()=>{R({videoUrl:e.clip,width:e.width,height:e.height,autoplay:e.autoplay,fullscreen:e.fullscreen,controls:e.controls,cssname:e.cssname}),o(e.width,e.height)}),u.watch(()=>[e.width,e.height],([s,r])=>{o(s,r)},{immediate:!0});function o(s,r){s&&r?t.value=`${r/s*100}%`:t.value="56.25%"}return{aspectRatio:t}}},q=e=>(u.pushScopeId("data-v-d26b150f"),e=e(),u.popScopeId(),e),A=q(()=>u.createElementVNode("div",{class:"video-content"},null,-1)),D=[A];function M(e,t,o,s,r,l){return u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass([o.cssname,"responsive-container"]),style:u.normalizeStyle({"--aspect-ratio":s.aspectRatio,width:"auto",maxWidth:"100%"})},D,6)}const B=L(N,[["render",M],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=B;

package.json

 {
   "name": "embedia-vue",
-  "version": "1.2.3",
+  "version": "1.2.5-alpha.1",
   "description": "A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -74,21 +74,8 @@ <p align="center">
 
- v1.2.3
- - Fixed the issue with embedding x.com concerning the width.
+ v1.2.5
+ - Fixed the issue with embedding Vimeo videos regarding autoplay.
 
- v1.2.2
- - Fixed the issue with embedding x.com, which restores the embedded post with a card rather than just a video.
 
 
- v1.1.1
- - The border line has been removed from the embedded YouTube clip.
- 
 
-  v1.1.2
- - Fixed the issue with embedding x.com.
-
-
- v1.1.3
- - Fixed the issue with muted vimeo.
-
-
 -------
@@ -122,5 +109,5 @@
 ------ | -------- | ----------|---------- |------------
-Required? `width` | yes | yes | no  | yes
-Required? `height` | yes | no | no | no
-Required? `fullscreen` |  optional | no | no |  no
+Required? `width` | yes |  |   | 
+Required? `height` | yes |  |  | 
+Required? `fullscreen` |  optional |  |   |  
 Required? `controls` |  |  |  |  
@@ -139,4 +126,4 @@ Required? `autoplay` |   |  |  |
 Required? `height` |  yes | yes | yes
-Required? `fullscreen` | optional | optional | optional
-Required? `controls` |  optional | optional | optional
+Required? `fullscreen` | optional | optional | 
+Required? `controls` |  optional | optional | 
 Required? `autoplay` | optional | optional |optional
@@ -143,0 +130,0 @@ Required? `cssname` | optional | optional | optional

src/core/embedLink.js

@@ -31,5 +31,26 @@ /* # Embedia Vue core license
 
+  
   const embedInstagram = (video, containerId, cssClassName, videoCount) => {
     const clipUrl = video.videoUrl;
-    const hc = Number(video.width) + 140;
+
+    
+
+    let hc;  
+    let wc;
+    if (video.width == '' ) {
+      wc = 370
+    } 
+    else {
+      wc = 370
+    }
+    if (video.height == '' ) {
+      hc = 505;
+    } 
+    else {
+      hc = 505;
+    }
+
+
+
+  
     // Extract the video ID from the URL
@@ -62,7 +83,8 @@ const videoId = extractInstagramVideoId(clipUrl);
     blockquote.setAttribute('data-instgrm-version', '13');
-    blockquote.style.width = `${video.width}px`;
+    blockquote.style.width = `${wc}px`;
     blockquote.style.height = `${hc}px`;
     blockquote.style.maxWidth = '380px';
-    blockquote.style.maxheight = '520px';
+    blockquote.style.maxheight = '510px';
 
+
     const anchor = document.createElement('a');
@@ -92,43 +114,64 @@ anchor.href = clipUrl;
   
+  
+  
+// Function to extract the Dailymotion video ID from the URL
+const extractDailymotionVideoId = (url) => {
+  const videoIdMatch = url.match(/(?:video|hub)\/([^_]+)/) || url.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
+  if (videoIdMatch && videoIdMatch[1]) {
+    return videoIdMatch[1];
+  }
+  throw new Error("Invalid Dailymotion video URL");
+};
 
+// Function to embed the Dailymotion video with autoplay disabled
+const embedDailymotion = (video, container, cssname) => {
+  const videoUrl = video.videoUrl;  // Ensure this is a valid Dailymotion URL
+  const videoId = extractDailymotionVideoId(videoUrl); // Extract video ID
+  const maxwidth = video.width || 640;  // Default width if not provided
+  const maxheight = video.height || 360;  // Default height if not provided
 
+  // Function to handle the oEmbed response from Dailymotion
+  window.handleDailymotionResponse = (data) => {
+    console.log("Dailymotion Response:", data);
+    if (data.html) {
+      // Create a container for the video
+      const videoContainer = document.createElement("div");
+      videoContainer.className = `${cssname} custom-dailymotion`;
+      videoContainer.innerHTML = data.html;
 
-    
-    const extractDailymotionVideoId = (url) => {
-      const videoIdMatch = url.match(/\/(?:video|hub)\/([^_]+)/) || url.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
-      if (videoIdMatch && videoIdMatch[1]) {
-        return videoIdMatch[1];
+      const videoElement = videoContainer.querySelector('iframe');
+      if (videoElement) {
+        // Apply width and height to iframe
+        videoElement.style.width = `${maxwidth}px`;
+        videoElement.style.height = `${maxheight}px`;
+
+        // Manually modify the 'allow' attribute to remove autoplay
+        const allowAttr = videoElement.getAttribute('allow');
+        
+        // Remove autoplay from the 'allow' attribute
+        if (allowAttr) {
+          videoElement.setAttribute('allow', allowAttr.replace('autoplay', ''));
+        } else {
+          // If 'allow' is not defined, we set the value without autoplay
+          videoElement.setAttribute('allow', 'fullscreen; picture-in-picture; muted');
+        }
       }
-      throw new Error("Invalid Dailymotion video URL");
-    };
-    
-    const embedDailymotion = (video, container, cssname) => {
-      const videoUrl = video.videoUrl;
-      const videoId = extractDailymotionVideoId(videoUrl);
-      const autoplayValue = video.autoplay ? '1' : '0';
-      const controlsValue = video.controls ? '1' : '0';
-      const fullscreenValue = video.fullscreen ? '1' : '0';
-    
-      const iframe = document.createElement("iframe");
-      iframe.src = `https://www.dailymotion.com/embed/video/${videoId}?autoplay=${autoplayValue}&controls=${controlsValue}&fullscreen=${fullscreenValue}`;
-      iframe.width = video.width || 640;
-      iframe.height = video.height || 360;
-      iframe.frameBorder = "0";
-      iframe.allowFullscreen = true;
-    
-      iframe.className = cssname;
-    
-      container.appendChild(iframe);
-    };
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-        // Function to extract Vimeo video ID from a URL
+
+      // Append the video container with the iframe to the provided container
+      container.appendChild(videoContainer);
+    }
+  };
+
+  // Make the oEmbed API request (without autoplay)
+  const script = document.createElement("script");
+  script.src = `https://www.dailymotion.com/services/oembed?url=https://www.dailymotion.com/video/${videoId}&maxwidth=${maxwidth}&maxheight=${maxheight}&format=json&callback=handleDailymotionResponse`;
+
+  // Append the script to the body to trigger the oEmbed request
+  document.body.appendChild(script);
+};
+
+
+
+
+// Function to extract Vimeo video ID from a URL
 const extractVimeoVideoId = (url) => {
@@ -143,53 +186,83 @@ const videoIdMatch = url.match(/\/(\d+)/);
 };
+
+// Function to embed Vimeo video
+const embedVimeo = (video, container, cssname) => {
+  const emWidth = video.width || 640;  // Default width if not provided
+  const emHeight = video.height || 360; // Default height if not provided
+  const controlsValue = video.controls !== undefined ? video.controls : true;  // Default to true if not provided
+  const autoplayValue = video.autoplay === true; // Autoplay set to boolean true
+  const loopValue = video.loop === "true"; // Convert loop to boolean
+  const fullscreenValue = video.fullscreen === true;  // Fullscreen option, converted to boolean
+
+  // Extract the Vimeo video ID from the URL
+  const videoId = extractVimeoVideoId(video.videoUrl);
   
-  const embedVimeo = (video, container, cssname) => {
-    const emWidth = video.width || 640;
-    const emHeight = video.height || 360;
-    const controlsValue = video.controls;
-    const autoplayValue = video.autoplay === "true"; // Convert to boolean
-    const loopValue = video.loop === "true"; // Convert to boolean
-  
- 
-    const videoId = extractVimeoVideoId(video.videoUrl);
-  
-    const playerDiv = document.createElement("div");
-    playerDiv.className = `video-${videoCount} ${cssname}`;
-    playerDiv.dataset.eWidth = emWidth;
-    playerDiv.dataset.eHeight = emHeight;
-    playerDiv.dataset.efullscreen = video.fullscreen;
-    playerDiv.dataset.eVideoId = videoId;
-  
-    container.appendChild(playerDiv);
-  
-    const script = document.createElement("script");
-    script.src = "https://player.vimeo.com/api/player.js";
-    script.async = true;
-  
-    script.onload = () => {
-      const vimeoPlayer = new window.Vimeo.Player(playerDiv, {
-        id: videoId,
-        width: emWidth,
-        height: emHeight,
-        controls: controlsValue,
-        autoplay: autoplayValue,
-        muted: autoplayValue,
-        loop: loopValue, // Set loop based on boolean value
-      });
-  
-      vimeoPlayer.ready().then(() => {
-        // Additional player methods can be used here if needed
-      });
-    };
-  
-    document.body.appendChild(script);
-  
-    return () => {
-      if (playerDiv) {
-        playerDiv.innerHTML = "";
+  // Create a div to hold the Vimeo player
+  const playerDiv = document.createElement("div");
+  playerDiv.className = `video-${videoId} ${cssname}`;
+  playerDiv.dataset.eWidth = emWidth;
+  playerDiv.dataset.eHeight = emHeight;
+  playerDiv.dataset.efullscreen = fullscreenValue; // Data attribute for fullscreen
+  playerDiv.dataset.eVideoId = videoId;
+
+  // Append the player container to the given container
+  container.appendChild(playerDiv);
+
+  // Load the Vimeo API script dynamically
+  const script = document.createElement("script");
+  script.src = "https://player.vimeo.com/api/player.js";
+  script.async = true;
+
+  script.onload = () => {
+    // Initialize the Vimeo player after the script has loaded
+    const vimeoPlayer = new window.Vimeo.Player(playerDiv, {
+      id: videoId,
+      width: emWidth,
+      height: emHeight,
+      controls: controlsValue,  // Show controls
+      autoplay: autoplayValue,  // Autoplay based on the passed value (true/false)
+      muted: autoplayValue,     // Mute if autoplay is true (to comply with browser restrictions)
+      loop: loopValue,       // Loop based on the loop value
+      fullscreen: fullscreenValue,      
+    });
+
+    // Ready callback
+    vimeoPlayer.ready().then(() => {
+      console.log('Vimeo player is ready');
+
+      // If fullscreen is set to false, hide the fullscreen button from the controls
+      if (fullscreenValue === false) {
+        const iframe = playerDiv.querySelector("iframe");
+        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+        
+        // Wait for the player to load before attempting to hide fullscreen button
+        const interval = setInterval(() => {
+          const fullscreenButton = iframeDocument.querySelector('.vimeo-control-bar .fullscreen');
+          
+          if (fullscreenButton) {
+            fullscreenButton.style.display = 'none';  // Hide fullscreen button in controls
+            clearInterval(interval);
+          }
+        }, 100);
       }
+    }).catch((error) => {
+      console.error('Error loading Vimeo player:', error);
+    });
+  };
+
+  // Append the script to the body to load it
+  document.body.appendChild(script);
+
+  // Cleanup function to remove the player and script when no longer needed
+  return () => {
+    if (playerDiv) {
+      playerDiv.innerHTML = "";
+    }
+    if (script && script.parentNode) {
       document.body.removeChild(script);
-    };
+    }
   };
+};
+
     
-    
   const embedTwitter = (video, container, cssname) => {
@@ -430,22 +503,28 @@
     
-    
     const embedFacebook = (video, container, cssname) => {
-      const videoUrl = video.videoUrl;
-      const autoplay = video.autoplay ? 'autoplay=true' : 'autoplay=false';
-      const muted = autoplay ? 'muted=true' : 'muted=false';
+      const clip = video.videoUrl;
+      const autoplayc = video.autoplay ?? true; // Default to true if not specified
+      const muted = autoplayc; // Default to true if not specified
       const emWidth = video.width || 640;
       const emHeight = video.height || 360;
     
+      // Construct the video URL with parameters
+      const videoSrc = new URL('https://www.facebook.com/plugins/video.php');
+      videoSrc.searchParams.set('href', clip);
+      videoSrc.searchParams.set('width', emWidth);
+      videoSrc.searchParams.set('height', emHeight);
+      videoSrc.searchParams.set('show_text', 'false');
+      videoSrc.searchParams.set('autoplay', autoplayc ? 'true' : 'false'); // Autoplay only if muted
+      videoSrc.searchParams.set('muted', muted ? '1' : '0');
+    
       // Create an iframe element for the Facebook video
       const iframe = document.createElement('iframe');
-      iframe.setAttribute('src', `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}&width=${emWidth}&height=${emHeight}&show_text=false&${autoplay}&${muted}`);
-      iframe.setAttribute('width', emWidth);
-      iframe.setAttribute('height', emHeight);
-      iframe.setAttribute('frameborder', '0');
+      iframe.src = videoSrc.toString();
+      iframe.width = emWidth;
+      iframe.height = emHeight;
+      iframe.frameBorder = '0';
+       // Allow autoplay and fullscreen permissions
+      iframe.allow = 'autoplay; fullscreen'; // Permissions for autoplay and fullscreen
+      iframe.allowFullscreen = video.fullscreen !== false; // Allow fullscreen unless explicitly disabled
     
-      if (video.fullscreen) {
-        iframe.setAttribute('allowfullscreen', 'true');
-      }
-    
-    
       iframe.className = `video-${videoCount} ${cssname} custom-facebook`;
@@ -455,2 +534,3 @@
     
+      // Append iframe to the container
       container.appendChild(iframe);
@@ -457,0 +537,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66592

increased by8.74%

Lines of code

932

increased by13.11%

Number of medium quality alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of lines in readme file

273

decreased by-4.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes