embedia-vue - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

dist/index.es.js

@@ -1,22 +0,22 @@
-import { ref as h, onMounted as p, watch as w, openBlock as f, createElementBlock as y, normalizeClass as b, normalizeStyle as g, pushScopeId as v, popScopeId as $, createElementVNode as E } from "vue";
-let m = 1;
-const U = (e, t, o, s) => {
-  const r = e.videoUrl, i = C(r);
-  if (!i)
+import { ref as p, onMounted as w, watch as f, openBlock as y, createElementBlock as b, normalizeClass as g, normalizeStyle as $, pushScopeId as x, popScopeId as E, createElementVNode as I } from "vue";
+let h = 1;
+const k = (e, t, o, a) => {
+  const n = e.videoUrl, s = Number(e.width) + 140, r = v(n);
+  if (!r)
     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 i = document.getElementById(t);
+  i || (i = document.createElement("div"), i.id = t, document.body.appendChild(i));
   let c = document.querySelector(`.${o}`);
-  c || (c = document.createElement("div"), c.className = `video-${s} ${o}`, n.appendChild(c));
-  const a = document.createElement("blockquote");
-  a.setAttribute("class", "instagram-media"), a.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${i}/`), a.setAttribute("data-instgrm-version", "13");
-  const l = document.createElement("a");
-  if (l.setAttribute("href", r), a.appendChild(l), c.appendChild(a), !document.getElementById("instagramEmbedScript")) {
-    const d = document.createElement("script");
-    d.setAttribute("async", ""), d.setAttribute("id", "instagramEmbedScript"), d.setAttribute("src", "//www.instagram.com/embed.js"), n.appendChild(d);
+  c || (c = document.createElement("div"), c.className = `video-${a} ${o}`, i.appendChild(c));
+  const l = document.createElement("blockquote");
+  l.className = "instagram-media", l.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${r}/`), l.setAttribute("data-instgrm-version", "13"), l.style.width = `${e.width}px`, l.style.height = `${s}px`, l.style.maxWidth = "380px", l.style.maxheight = "520px";
+  const d = document.createElement("a");
+  if (d.href = n, l.appendChild(d), c.appendChild(l), !document.getElementById("instagramEmbedScript")) {
+    const m = document.createElement("script");
+    m.async = !0, m.id = "instagramEmbedScript", m.src = "//www.instagram.com/embed.js", i.appendChild(m);
   }
-}, C = (e) => {
+}, v = (e) => {
   const t = /\/([a-zA-Z0-9_-]+)\/?$/, o = e.match(t);
   return o ? o[1] : null;
-}, I = (e) => {
+}, C = (e) => {
   const t = e.match(/\/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
@@ -26,22 +26,22 @@ if (t && t[1])
   throw new Error("Invalid Dailymotion video URL");
-}, _ = (e, t, o) => {
-  const s = e.videoUrl, r = I(s), i = e.autoplay ? "1" : "0", n = e.controls ? "1" : "0", c = e.fullscreen ? "1" : "0", a = document.createElement("iframe");
-  a.src = `https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${n}&fullscreen=${c}`, a.width = e.width || 640, a.height = e.height || 360, a.frameBorder = "0", a.allowFullscreen = !0, a.className = o, t.appendChild(a);
-}, k = (e) => {
+}, U = (e, t, o) => {
+  const a = e.videoUrl, n = C(a), s = e.autoplay ? "1" : "0", r = e.controls ? "1" : "0", i = e.fullscreen ? "1" : "0", c = document.createElement("iframe");
+  c.src = `https://www.dailymotion.com/embed/video/${n}?autoplay=${s}&controls=${r}&fullscreen=${i}`, c.width = e.width || 640, c.height = e.height || 360, c.frameBorder = "0", c.allowFullscreen = !0, c.className = o, t.appendChild(c);
+}, _ = (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, n = e.autoplay, c = e.loop, a = k(e.videoUrl), l = document.createElement("div");
-  l.className = `video-${m} ${o}`, l.dataset.eWidth = s, l.dataset.eHeight = r, l.dataset.efullscreen = e.fullscreen, l.dataset.eVideoId = a, t.appendChild(l);
+  const a = e.width || 640, n = e.height || 360, s = e.controls, r = e.autoplay === "true", i = e.loop === "true", c = _(e.videoUrl), l = document.createElement("div");
+  l.className = `video-${h} ${o}`, l.dataset.eWidth = a, l.dataset.eHeight = n, l.dataset.efullscreen = e.fullscreen, l.dataset.eVideoId = c, 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: n,
-      muted: !!n,
-      // Set muted to true if autoplay is true
-      loop: c
+      id: c,
+      width: a,
+      height: n,
+      controls: s,
+      autoplay: r,
+      muted: r,
+      loop: i
+      // Set loop based on boolean value
     }).ready().then(() => {
@@ -52,60 +52,86 @@ });
   };
-}, x = (e, t, o) => {
-  const s = (r) => {
-    const i = /\/status\/(\d+)/, n = r.match(i);
-    return n && n[1] ? n[1] : null;
+}, V = (e, t, o) => {
+  const a = (n) => {
+    const s = /\/(?:i\/)?status\/(\d+)/, r = n.match(s);
+    return r ? r[1] : null;
   };
   try {
-    const r = e.videoUrl, i = s(r), n = document.createElement("div");
-    n.className = `video-${m} ${o}`, n.id = `tweet-${i}`;
-    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(i, n);
-    }), t.appendChild(n), t.appendChild(c);
-  } catch (r) {
-    console.error("Error embedding Twitter content:", r);
+    if (!(t instanceof Node)) {
+      console.error("Container is not a valid DOM node.");
+      return;
+    }
+    const n = e.videoUrl, s = a(n);
+    if (!n || !s) {
+      console.error("Invalid video clip URL or tweet ID.");
+      return;
+    }
+    const r = document.createElement("blockquote");
+    r.className = `twitter-tweet ${o}`, r.setAttribute("data-media-max-width", e.width), r.setAttribute("data-media-max-height", e.height), r.innerHTML = `
+        <p lang="en" style="min-width: ${e.width}px; display: block;">
+          <a href="${n}" style="display: inline-block; min-width: ${e.width}px;">
+          </a>
+        </p>
+      `, t.appendChild(r);
+    const i = document.createElement("script");
+    i.src = "https://platform.twitter.com/widgets.js", i.charset = "utf-8", i.async = !0, i.addEventListener("load", () => {
+      window.twttr.widgets.load();
+    }), t.appendChild(i);
+  } catch (n) {
+    console.error("Error embedding Twitter content:", n);
   }
-}, V = (e, t, o) => {
-  const s = (r) => {
-    const i = /\/status\/(\d+)/, n = r.match(i);
-    return n ? n[1] : null;
+}, A = (e, t, o) => {
+  const a = (n) => {
+    n = n.replace("x.com", "twitter.com");
+    const s = /\/(?:i\/)?status\/(\d+)/, r = n.match(s);
+    return r ? r[1] : null;
   };
   try {
-    const r = e.videoUrl, i = s(r);
-    if (!i)
-      throw new Error("Invalid video URL");
-    const n = document.createElement("div");
-    n.className = `video-${m} ${o}`, n.id = `tweet-${i}`;
-    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(i, n);
-    }), t.appendChild(n), t.appendChild(c);
-  } catch (r) {
-    console.error("Error embedding Twitter content:", r);
+    if (!(t instanceof Node)) {
+      console.error("Container is not a valid DOM node.");
+      return;
+    }
+    const n = e.videoUrl, s = a(n);
+    if (!n || !s) {
+      console.error("Invalid video clip URL or tweet ID.");
+      return;
+    }
+    const r = document.createElement("blockquote");
+    r.className = `twitter-tweet ${o}`, r.setAttribute("data-media-max-width", e.width), r.setAttribute("data-media-max-height", e.height), r.innerHTML = `
+        <p lang="en" style="min-width: ${e.width}px; display: block;">
+          <a href="https://twitter.com/i/status/${s}" style="display: inline-block; min-width: ${e.width}px;">
+          </a>
+        </p>
+      `, t.appendChild(r);
+    const i = document.createElement("script");
+    i.src = "https://platform.twitter.com/widgets.js", i.charset = "utf-8", i.async = !0, i.addEventListener("load", () => {
+      window.twttr.widgets.load();
+    }), t.appendChild(i);
+  } catch (n) {
+    console.error("Error embedding Twitter content:", n);
   }
-}, u = /* @__PURE__ */ new Map(), A = (e, t, o) => {
-  const s = e.videoUrl;
-  if (u.has(s) || u.has(s))
+}, u = /* @__PURE__ */ new Map(), S = (e, t, o) => {
+  const a = e.videoUrl;
+  if (u.has(a) || u.has(a))
     return;
-  u.set(s, !0);
-  const r = e.width || "100%", i = 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 a = document.createElement("div"), l = Date.now();
-      if (a.className = `video-${l} ${o}`, a.style.width = r, a.style.height = i, a.innerHTML = c.html, !document.querySelector('script[src="https://www.tiktok.com/embed.js"]')) {
+  u.set(a, !0);
+  const n = e.width || "100%", s = e.height || "100%", r = new XMLHttpRequest();
+  r.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(a)}`, !0), r.onload = function() {
+    if (r.status >= 200 && r.status < 300) {
+      const i = JSON.parse(r.responseText);
+      i.html && (i.html = i.html.replace(/<script[^>]*>.*<\/script>/gi, ""));
+      const c = document.createElement("div"), l = Date.now();
+      if (c.className = `video-${l} ${o}`, c.style.width = n, c.style.height = s, c.innerHTML = i.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);
+      t ? t.appendChild(c) : document.body && document.body.appendChild(c);
     } else
-      console.error("Failed to fetch TikTok oEmbed data: " + n.statusText);
-  }, n.onerror = function() {
+      console.error("Failed to fetch TikTok oEmbed data: " + r.statusText);
+  }, r.onerror = function() {
     console.error("An error occurred while embedding TikTok video.");
-  }, n.send();
-}, S = (e, t, o) => {
-  const s = e.videoUrl, r = e.autoplay ? "autoplay=true" : "autoplay=false", i = r ? "muted=true" : "muted=false", n = e.width || 640, c = e.height || 360, a = document.createElement("iframe");
-  a.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${n}&height=${c}&show_text=false&${r}&${i}`), a.setAttribute("width", n), a.setAttribute("height", c), a.setAttribute("frameborder", "0"), e.fullscreen && a.setAttribute("allowfullscreen", "true"), a.className = `video-${m} ${o} custom-facebook`, m++, t.appendChild(a);
-}, N = (e) => {
+  }, r.send();
+}, N = (e, t, o) => {
+  const a = e.videoUrl, n = e.autoplay ? "autoplay=true" : "autoplay=false", s = n ? "muted=true" : "muted=false", r = e.width || 640, i = e.height || 360, c = document.createElement("iframe");
+  c.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(a)}&width=${r}&height=${i}&show_text=false&${n}&${s}`), c.setAttribute("width", r), c.setAttribute("height", i), c.setAttribute("frameborder", "0"), e.fullscreen && c.setAttribute("allowfullscreen", "true"), c.className = `video-${h} ${o} custom-facebook`, h++, t.appendChild(c);
+}, L = (e) => {
   const t = e.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
@@ -118,3 +144,3 @@ if (t && t[1])
   throw new Error("Invalid YouTube video URL");
-}, R = (e, t, o) => {
+}, M = (e, t, o) => {
   if (!t) {
@@ -124,12 +150,12 @@ 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, n = N(e.videoUrl), c = document.createElement("iframe");
-  c.src = `https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${i ? 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);
-}, L = (e) => {
-  var s;
-  const t = ((s = e.cssname) == null ? void 0 : s.trim()) || "";
+  const a = e.autoplay ? 1 : 0, n = e.autoplay || e.muted ? 1 : 0, s = e.autoplay || e.loop ? 1 : 0, r = L(e.videoUrl), i = document.createElement("iframe");
+  i.src = `https://www.youtube.com/embed/${r}?autoplay=${a}&mute=${n}&loop=${s ? 1 : 0}&controls=${e.controls ? 1 : 0}`, i.width = e.width || 640, i.height = e.height || 360, i.frameborder = "0", i.style.border = "none", e.fullscreen && i.setAttribute("allow", "fullscreen"), i.className = o, t.appendChild(i);
+}, R = (e) => {
+  var a;
+  const t = ((a = e.cssname) == null ? void 0 : a.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 = `
+    const n = document.createElement("style");
+    n.id = `default-style-${t}`, n.textContent = `
             .${t} {
@@ -143,3 +169,3 @@ display: flex;
             }
-          `, document.head.appendChild(r);
+          `, document.head.appendChild(n);
   }
@@ -152,26 +178,26 @@ const o = document.querySelector(`.${t}`);
   if (e.videoUrl.includes("youtube.com") || e.videoUrl.includes("youtu.be"))
-    R(e, o, t);
+    M(e, o, t);
   else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com"))
+    N(e, o, t);
+  else if (e.videoUrl.includes("tiktok.com") || e.videoUrl.includes("tiktok"))
     S(e, o, t);
-  else if (e.videoUrl.includes("tiktok.com") || e.videoUrl.includes("tiktok"))
-    A(e, o, t);
   else if (e.videoUrl.includes("twitter.com"))
-    x(e, o, t);
+    V(e, o, t);
   else if (e.videoUrl.includes("x.com"))
-    V(e, o, t);
+    A(e, o, t);
   else if (e.videoUrl.includes("vimeo.com"))
     T(e, o, t);
   else if (e.videoUrl.includes("dailymotion.com") || e.videoUrl.includes("dailymotion"))
-    _(e, o, t);
+    U(e, o, t);
   else if (e.videoUrl.includes("instagram.com") || e.videoUrl.includes("instagram"))
-    U(e, o, t);
+    k(e, o, t);
   else
     throw new Error("Invalid video URL");
 };
-const B = (e, t) => {
+const q = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [s, r] of t)
-    o[s] = r;
+  for (const [a, n] of t)
+    o[a] = n;
   return o;
-}, M = {
+}, D = {
   name: "EmbediaVue",
@@ -209,5 +235,5 @@ props: {
   setup(e) {
-    const t = h("56.25%");
-    p(() => {
-      L({
+    const t = p("56.25%");
+    w(() => {
+      R({
         videoUrl: e.clip,
@@ -221,7 +247,7 @@ width: e.width,
       }), o(e.width, e.height);
-    }), w(() => [e.width, e.height], ([s, r]) => {
-      o(s, r);
+    }), f(() => [e.width, e.height], ([a, n]) => {
+      o(a, n);
     }, { immediate: !0 });
-    function o(s, r) {
-      s && r ? t.value = `${r / s * 100}%` : t.value = "56.25%";
+    function o(a, n) {
+      a && n ? t.value = `${n / a * 100}%` : t.value = "56.25%";
     }
@@ -232,14 +258,14 @@ return {
   }
-}, q = (e) => (v("data-v-d26b150f"), e = e(), $(), e), j = /* @__PURE__ */ q(() => /* @__PURE__ */ E("div", { class: "video-content" }, null, -1)), z = [
-  j
+}, B = (e) => (x("data-v-d26b150f"), e = e(), E(), e), H = /* @__PURE__ */ B(() => /* @__PURE__ */ I("div", { class: "video-content" }, null, -1)), j = [
+  H
 ];
-function D(e, t, o, s, r, i) {
-  return f(), y("div", {
-    class: b([o.cssname, "responsive-container"]),
-    style: g({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" })
-  }, z, 6);
+function W(e, t, o, a, n, s) {
+  return y(), b("div", {
+    class: g([o.cssname, "responsive-container"]),
+    style: $({ "--aspect-ratio": a.aspectRatio, width: "auto", maxWidth: "100%" })
+  }, j, 6);
 }
-const F = /* @__PURE__ */ B(M, [["render", D], ["__scopeId", "data-v-d26b150f"]]);
+const O = /* @__PURE__ */ q(D, [["render", W], ["__scopeId", "data-v-d26b150f"]]);
 export {
-  F as EmbediaVue
+  O as EmbediaVue
 };

dist/index.js

@@ -1,2 +0,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue");let m=1;const p=(e,t,o,s)=>{const r=e.videoUrl,i=w(r);if(!i)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 c=document.querySelector(`.${o}`);c||(c=document.createElement("div"),c.className=`video-${s} ${o}`,n.appendChild(c));const a=document.createElement("blockquote");a.setAttribute("class","instagram-media"),a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${i}/`),a.setAttribute("data-instgrm-version","13");const l=document.createElement("a");if(l.setAttribute("href",r),a.appendChild(l),c.appendChild(a),!document.getElementById("instagramEmbedScript")){const d=document.createElement("script");d.setAttribute("async",""),d.setAttribute("id","instagramEmbedScript"),d.setAttribute("src","//www.instagram.com/embed.js"),n.appendChild(d)}},w=e=>{const t=/\/([a-zA-Z0-9_-]+)\/?$/,o=e.match(t);return o?o[1]:null},f=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")},y=(e,t,o)=>{const s=e.videoUrl,r=f(s),i=e.autoplay?"1":"0",n=e.controls?"1":"0",c=e.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${r}?autoplay=${i}&controls=${n}&fullscreen=${c}`,a.width=e.width||640,a.height=e.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=o,t.appendChild(a)},b=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},g=(e,t,o)=>{const s=e.width||640,r=e.height||360,i=e.controls,n=e.autoplay,c=e.loop,a=b(e.videoUrl),l=document.createElement("div");l.className=`video-${m} ${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:n,muted:!!n,loop:c}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},v=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,n=r.match(i);return n&&n[1]?n[1]:null};try{const r=e.videoUrl,i=s(r),n=document.createElement("div");n.className=`video-${m} ${o}`,n.id=`tweet-${i}`;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(i,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},$=(e,t,o)=>{const s=r=>{const i=/\/status\/(\d+)/,n=r.match(i);return n?n[1]:null};try{const r=e.videoUrl,i=s(r);if(!i)throw new Error("Invalid video URL");const n=document.createElement("div");n.className=`video-${m} ${o}`,n.id=`tweet-${i}`;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(i,n)}),t.appendChild(n),t.appendChild(c)}catch(r){console.error("Error embedding Twitter content:",r)}},h=new Map,E=(e,t,o)=>{const s=e.videoUrl;if(h.has(s)||h.has(s))return;h.set(s,!0);const r=e.width||"100%",i=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 a=document.createElement("div"),l=Date.now();if(a.className=`video-${l} ${o}`,a.style.width=r,a.style.height=i,a.innerHTML=c.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: "+n.statusText)},n.onerror=function(){console.error("An error occurred while embedding TikTok video.")},n.send()},U=(e,t,o)=>{const s=e.videoUrl,r=e.autoplay?"autoplay=true":"autoplay=false",i=r?"muted=true":"muted=false",n=e.width||640,c=e.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(s)}&width=${n}&height=${c}&show_text=false&${r}&${i}`),a.setAttribute("width",n),a.setAttribute("height",c),a.setAttribute("frameborder","0"),e.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${m} ${o} custom-facebook`,m++,t.appendChild(a)},C=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")},I=(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,n=C(e.videoUrl),c=document.createElement("iframe");c.src=`https://www.youtube.com/embed/${n}?autoplay=${s}&mute=${r}&loop=${i?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)},_=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 m=require("vue");let p=1;const w=(e,t,o,a)=>{const n=e.videoUrl,s=Number(e.width)+140,r=f(n);if(!r)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 c=document.querySelector(`.${o}`);c||(c=document.createElement("div"),c.className=`video-${a} ${o}`,i.appendChild(c));const l=document.createElement("blockquote");l.className="instagram-media",l.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${r}/`),l.setAttribute("data-instgrm-version","13"),l.style.width=`${e.width}px`,l.style.height=`${s}px`,l.style.maxWidth="380px",l.style.maxheight="520px";const d=document.createElement("a");if(d.href=n,l.appendChild(d),c.appendChild(l),!document.getElementById("instagramEmbedScript")){const u=document.createElement("script");u.async=!0,u.id="instagramEmbedScript",u.src="//www.instagram.com/embed.js",i.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 a=e.videoUrl,n=y(a),s=e.autoplay?"1":"0",r=e.controls?"1":"0",i=e.fullscreen?"1":"0",c=document.createElement("iframe");c.src=`https://www.dailymotion.com/embed/video/${n}?autoplay=${s}&controls=${r}&fullscreen=${i}`,c.width=e.width||640,c.height=e.height||360,c.frameBorder="0",c.allowFullscreen=!0,c.className=o,t.appendChild(c)},g=e=>{const t=e.match(/\/(\d+)/);return t&&t[1]?t[1]:(console.error("Invalid Vimeo video URL"),"")},$=(e,t,o)=>{const a=e.width||640,n=e.height||360,s=e.controls,r=e.autoplay==="true",i=e.loop==="true",c=g(e.videoUrl),l=document.createElement("div");l.className=`video-${p} ${o}`,l.dataset.eWidth=a,l.dataset.eHeight=n,l.dataset.efullscreen=e.fullscreen,l.dataset.eVideoId=c,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:c,width:a,height:n,controls:s,autoplay:r,muted:r,loop:i}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},E=(e,t,o)=>{const a=n=>{const s=/\/(?:i\/)?status\/(\d+)/,r=n.match(s);return r?r[1]:null};try{if(!(t instanceof Node)){console.error("Container is not a valid DOM node.");return}const n=e.videoUrl,s=a(n);if(!n||!s){console.error("Invalid video clip URL or tweet ID.");return}const r=document.createElement("blockquote");r.className=`twitter-tweet ${o}`,r.setAttribute("data-media-max-width",e.width),r.setAttribute("data-media-max-height",e.height),r.innerHTML=`
+        <p lang="en" style="min-width: ${e.width}px; display: block;">
+          <a href="${n}" style="display: inline-block; min-width: ${e.width}px;">
+          </a>
+        </p>
+      `,t.appendChild(r);const i=document.createElement("script");i.src="https://platform.twitter.com/widgets.js",i.charset="utf-8",i.async=!0,i.addEventListener("load",()=>{window.twttr.widgets.load()}),t.appendChild(i)}catch(n){console.error("Error embedding Twitter content:",n)}},v=(e,t,o)=>{const a=n=>{n=n.replace("x.com","twitter.com");const s=/\/(?:i\/)?status\/(\d+)/,r=n.match(s);return r?r[1]:null};try{if(!(t instanceof Node)){console.error("Container is not a valid DOM node.");return}const n=e.videoUrl,s=a(n);if(!n||!s){console.error("Invalid video clip URL or tweet ID.");return}const r=document.createElement("blockquote");r.className=`twitter-tweet ${o}`,r.setAttribute("data-media-max-width",e.width),r.setAttribute("data-media-max-height",e.height),r.innerHTML=`
+        <p lang="en" style="min-width: ${e.width}px; display: block;">
+          <a href="https://twitter.com/i/status/${s}" style="display: inline-block; min-width: ${e.width}px;">
+          </a>
+        </p>
+      `,t.appendChild(r);const i=document.createElement("script");i.src="https://platform.twitter.com/widgets.js",i.charset="utf-8",i.async=!0,i.addEventListener("load",()=>{window.twttr.widgets.load()}),t.appendChild(i)}catch(n){console.error("Error embedding Twitter content:",n)}},h=new Map,x=(e,t,o)=>{const a=e.videoUrl;if(h.has(a)||h.has(a))return;h.set(a,!0);const n=e.width||"100%",s=e.height||"100%",r=new XMLHttpRequest;r.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(a)}`,!0),r.onload=function(){if(r.status>=200&&r.status<300){const i=JSON.parse(r.responseText);i.html&&(i.html=i.html.replace(/<script[^>]*>.*<\/script>/gi,""));const c=document.createElement("div"),l=Date.now();if(c.className=`video-${l} ${o}`,c.style.width=n,c.style.height=s,c.innerHTML=i.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(c):document.body&&document.body.appendChild(c)}else console.error("Failed to fetch TikTok oEmbed data: "+r.statusText)},r.onerror=function(){console.error("An error occurred while embedding TikTok video.")},r.send()},I=(e,t,o)=>{const a=e.videoUrl,n=e.autoplay?"autoplay=true":"autoplay=false",s=n?"muted=true":"muted=false",r=e.width||640,i=e.height||360,c=document.createElement("iframe");c.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(a)}&width=${r}&height=${i}&show_text=false&${n}&${s}`),c.setAttribute("width",r),c.setAttribute("height",i),c.setAttribute("frameborder","0"),e.fullscreen&&c.setAttribute("allowfullscreen","true"),c.className=`video-${p} ${o} custom-facebook`,p++,t.appendChild(c)},k=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")},C=(e,t,o)=>{if(!t){console.error("Container element not found.");return}const a=e.autoplay?1:0,n=e.autoplay||e.muted?1:0,s=e.autoplay||e.loop?1:0,r=k(e.videoUrl),i=document.createElement("iframe");i.src=`https://www.youtube.com/embed/${r}?autoplay=${a}&mute=${n}&loop=${s?1:0}&controls=${e.controls?1:0}`,i.width=e.width||640,i.height=e.height||360,i.frameborder="0",i.style.border="none",e.fullscreen&&i.setAttribute("allow","fullscreen"),i.className=o,t.appendChild(i)},U=e=>{var a;const t=((a=e.cssname)==null?void 0:a.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 n=document.createElement("style");n.id=`default-style-${t}`,n.textContent=`
             .${t} {
@@ -10,2 +20,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"))I(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))U(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))E(e,o,t);else if(e.videoUrl.includes("twitter.com"))v(e,o,t);else if(e.videoUrl.includes("x.com"))$(e,o,t);else if(e.videoUrl.includes("vimeo.com"))g(e,o,t);else if(e.videoUrl.includes("dailymotion.com")||e.videoUrl.includes("dailymotion"))y(e,o,t);else if(e.videoUrl.includes("instagram.com")||e.videoUrl.includes("instagram"))p(e,o,t);else throw new Error("Invalid video URL")};const k=(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=u.ref("56.25%");u.onMounted(()=>{_({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}}},V=e=>(u.pushScopeId("data-v-d26b150f"),e=e(),u.popScopeId(),e),x=V(()=>u.createElementVNode("div",{class:"video-content"},null,-1)),S=[x];function A(e,t,o,s,r,i){return u.openBlock(),u.createElementBlock("div",{class:u.normalizeClass([o.cssname,"responsive-container"]),style:u.normalizeStyle({"--aspect-ratio":s.aspectRatio,width:"auto",maxWidth:"100%"})},S,6)}const N=k(T,[["render",A],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=N;
+          `,document.head.appendChild(n)}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"))C(e,o,t);else if(e.videoUrl.includes("facebook.com")||e.videoUrl.includes("fb.com"))I(e,o,t);else if(e.videoUrl.includes("tiktok.com")||e.videoUrl.includes("tiktok"))x(e,o,t);else if(e.videoUrl.includes("twitter.com"))E(e,o,t);else if(e.videoUrl.includes("x.com"))v(e,o,t);else if(e.videoUrl.includes("vimeo.com"))$(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 _=(e,t)=>{const o=e.__vccOpts||e;for(const[a,n]of t)o[a]=n;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(()=>{U({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],([a,n])=>{o(a,n)},{immediate:!0});function o(a,n){a&&n?t.value=`${n/a*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,a,n,s){return m.openBlock(),m.createElementBlock("div",{class:m.normalizeClass([o.cssname,"responsive-container"]),style:m.normalizeStyle({"--aspect-ratio":a.aspectRatio,width:"auto",maxWidth:"100%"})},A,6)}const L=_(T,[["render",N],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=L;

package.json

 {
   "name": "embedia-vue",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.",
@@ -10,3 +10,3 @@ "main": "dist/index.js",
     "type": "git",
-    "url": "https://github.com/demjhonsilver/embedia-vue.git"
+    "url": "git+https://github.com/demjhonsilver/embedia-vue.git"
   },
@@ -45,4 +45,6 @@ "homepage": "https://demjhonsilver.github.io/embedia-vue-docs/",
     "twitter",
+    "x",
     "shorts",
     "javascript",
+    "typescript",
     "vue"
@@ -49,0 +51,0 @@ ],

README.md

@@ -63,4 +63,9 @@ <p align="center">
 
+ v1.2.0
+ - The embedded video for X and Instagram will be minimal.
+ - The embedded video for Vimeo has fixed the auto loop issue.
+
+
  v1.1.0
- - The embedded video for Twitter supports x.com.
+ - The embedded video for supports X.com.
 
@@ -87,3 +92,3 @@ Patch Changes:
 - Easy to set-up and responsive.
-- Supports embedding one or more videos from platforms including Facebook, Instagram, TikTok, YouTube, YouTube Shorts, Twitter/X, Dailymotion, and Vimeo.
+- Supports embedding one or more videos from platforms including Facebook, Instagram, TikTok, YouTube, YouTube Shorts, X, Dailymotion, and Vimeo.
 
@@ -108,9 +113,9 @@ ___________
 ## Embed-video
-Attributes | ![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white) | ![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white) | ![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?style=for-the-badge&logo=TikTok&logoColor=white)  | ![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white) ![X](https://img.shields.io/badge/X-%23000000.svg?style=for-the-badge&logo=X&logoColor=white) |
+Attributes | ![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white) | ![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white) | ![TikTok](https://img.shields.io/badge/TikTok-%23000000.svg?style=for-the-badge&logo=TikTok&logoColor=white)  | ![X](https://img.shields.io/badge/X-%23000000.svg?style=for-the-badge&logo=X&logoColor=white) |
 ------ | -------- | ----------|---------- |------------
-Required? `width` | optional | |  | 
-Required? `height` | optional |  |  | 
-Required? `fullscreen` |  optional |  |  |  
-Required? `controls` | optional |  |  |  
-Required? `autoplay` |  optional |  |  |   
+Required? `width` | yes | yes | no  | yes
+Required? `height` | yes | no | no | no
+Required? `fullscreen` |  optional | no | no |  no
+Required? `controls` |  |  |  |  
+Required? `autoplay` |   |  |  |   
 Required? `cssname` |  optional  | optional | optional |  optional
@@ -125,4 +130,4 @@ Required? `clip` |  yes | yes | yes | yes
 ------ | -------- | ----------|---------- | 
-Required? `width` |  optional | optional | optional
-Required? `height` |  optional | optional | optional
+Required? `width` |  yes | yes | yes
+Required? `height` |  yes | yes | yes
 Required? `fullscreen` | optional | optional | optional
@@ -242,3 +247,2 @@ Required? `controls` |  optional | optional | optional
 .embed-clip {
-  float: right;
   border: 2px solid green;
@@ -245,0 +249,0 @@ }

src/core/embedLink.js

@@ -28,65 +28,68 @@ /* # Embedia Vue core license
   
+  
   let videoCount = 1; // Initialize videoCount
 
+  const embedInstagram = (video, containerId, cssClassName, videoCount) => {
+    const clipUrl = video.videoUrl;
+    const hc = Number(video.width) + 140;
+    // Extract the video ID from the URL
+    const videoId = extractInstagramVideoId(clipUrl);
+    if (!videoId) {
+      throw new Error('Invalid Instagram video URL');
+    }
+  
+    // Ensure the container element exists
+    let embedContainer = document.getElementById(containerId);
+    if (!embedContainer) {
+      embedContainer = document.createElement('div');
+      embedContainer.id = containerId;
+      document.body.appendChild(embedContainer);
+    }
+  
+    // Create or find the playerDiv for the Instagram video
+    let playerDiv = document.querySelector(`.${cssClassName}`);
+    if (!playerDiv) {
+      playerDiv = document.createElement('div');
+      playerDiv.className = `video-${videoCount} ${cssClassName}`;
+      embedContainer.appendChild(playerDiv);
+    }
+  
+    // Create the blockquote element for Instagram embed
+    const blockquote = document.createElement('blockquote');
+    blockquote.className = 'instagram-media';
+    blockquote.setAttribute('data-instgrm-permalink', `https://www.instagram.com/p/${videoId}/`);
+    blockquote.setAttribute('data-instgrm-version', '13');
+    blockquote.style.width = `${video.width}px`;
+    blockquote.style.height = `${hc}px`;
+    blockquote.style.maxWidth = '380px';
+    blockquote.style.maxheight = '520px';
 
-  const embedInstagram = (video, container, cssname, videoCount) => {
-      const videoUrl = video.videoUrl;
+    const anchor = document.createElement('a');
+    anchor.href = clipUrl;
+    blockquote.appendChild(anchor);
+  
+    // Append the blockquote to the playerDiv
+    playerDiv.appendChild(blockquote);
+  
+    // Append the Instagram embed script if it doesn't exist
+    if (!document.getElementById('instagramEmbedScript')) {
+      const script = document.createElement('script');
+      script.async = true;
+      script.id = 'instagramEmbedScript';
+      script.src = '//www.instagram.com/embed.js';
+      embedContainer.appendChild(script);
+    }
+  };
+  
+  // Regular expression to extract Instagram video ID from URL
+  const extractInstagramVideoId = (url) => {
+    const regex = /\/([a-zA-Z0-9_-]+)\/?$/;
+    const match = url.match(regex);
+    return match ? match[1] : null;
+  };
+  
+
+
+
     
-      // Extract the video ID from the URL
-      const videoId = extractInstagramVideoId(videoUrl);
-      if (!videoId) {
-        throw new Error('Invalid Instagram video URL');
-      }
-    
-      // Check if the container element exists, create it if it doesn't
-      let embedContainer = document.getElementById(container);
-      if (!embedContainer) {
-        embedContainer = document.createElement('div');
-        embedContainer.id = container;
-        document.body.appendChild(embedContainer);
-      }
-    
-      // Check if the playerDiv for the Instagram video already exists
-      let playerDiv = document.querySelector(`.${cssname}`);
-      if (!playerDiv) {
-        // Create the playerDiv containing the Instagram video with the specified cssname
-        playerDiv = document.createElement("div");
-        playerDiv.className = `video-${videoCount} ${cssname}`;
-    
-        // Append the playerDiv to the embedContainer
-        embedContainer.appendChild(playerDiv);
-      }
-    
-      // Create the blockquote element for Instagram embed
-      const blockquote = document.createElement('blockquote');
-      blockquote.setAttribute('class', 'instagram-media');
-      blockquote.setAttribute('data-instgrm-permalink', `https://www.instagram.com/p/${videoId}/`);
-      blockquote.setAttribute('data-instgrm-version', '13');
-    
-      const anchor = document.createElement('a');
-      anchor.setAttribute('href', videoUrl);
-      blockquote.appendChild(anchor);
-    
-      // Append the blockquote to the playerDiv
-      playerDiv.appendChild(blockquote);
-    
-      // Check if embed script already exists, if not, append it to the embedContainer
-      if (!document.getElementById('instagramEmbedScript')) {
-        const script = document.createElement('script');
-        script.setAttribute('async', '');
-        script.setAttribute('id', 'instagramEmbedScript');
-        script.setAttribute('src', '//www.instagram.com/embed.js');
-        embedContainer.appendChild(script);
-      }
-    };
-    
-    
-    // Regular expression to extract Instagram video ID from URL
-    const extractInstagramVideoId = (url) => {
-      const regex = /\/([a-zA-Z0-9_-]+)\/?$/;
-      const match = url.match(regex);
-      return match ? match[1] : null;
-    };
-    
-    
     const extractDailymotionVideoId = (url) => {
@@ -128,157 +131,184 @@ const videoIdMatch = url.match(/\/(?:video|hub)\/([^_]+)/) || url.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
     
-    
-    
-    
-    
-    // Function to extract Vimeo video ID from a URL
-    const extractVimeoVideoId = (url) => {
-      const videoIdMatch = url.match(/\/(\d+)/);
-      if (videoIdMatch && videoIdMatch[1]) {
-        return videoIdMatch[1];
-      } else {
-        console.error("Invalid Vimeo video URL");
-        return "";
+        // Function to extract Vimeo video ID from a URL
+const extractVimeoVideoId = (url) => {
+  const videoIdMatch = url.match(/\/(\d+)/);
+  if (videoIdMatch && videoIdMatch[1]) {
+    return videoIdMatch[1];
+  } else {
+    console.error("Invalid Vimeo video URL");
+    return "";
+  }
+};
+  
+  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 = "";
       }
+      document.body.removeChild(script);
     };
+  };
     
     
-    const embedVimeo = (video, container, cssname) => {
-      const emWidth = video.width || 640;
-      const emHeight = video.height || 360;
-      const controlsValue = video.controls;
-      const autoplayValue = video.autoplay;
-      const loopValue = video.loop;
-    
-      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, // Set muted to true if autoplay is true
-          loop: loopValue,
-        });
-    
-        vimeoPlayer.ready().then(() => {
-          // You can use player methods here as needed
-        });
-      };
-    
-      document.body.appendChild(script);
-    
-      return () => {
-        if (playerDiv) {
-          playerDiv.innerHTML = "";
-        }
-        document.body.removeChild(script);
-      };
+  const embedTwitter = (video, container, cssname) => {
+    const extractTwitterTweetId = (url) => {
+      const regex = /\/(?:i\/)?status\/(\d+)/; // Extracts tweet ID
+      const match = url.match(regex);
+      return match ? match[1] : null; // Return tweet ID or null
     };
-    
-    
-    
-    
-    const embedTwitter = (video, container, cssname) => {
-    
-      const extractTwitterTweetId = (url) => {
-        const regex = /\/status\/(\d+)/;
-        const match = url.match(regex);
-    
-        if (match && match[1]) {
-          return match[1];
-        } else {
-          return null; // No match found
-        }
-      };
-    
-      try {
-        const videoUrl = video.videoUrl;
-        const tweetId = extractTwitterTweetId(videoUrl);
-    
-        // Create a div to hold the embedded tweet
-        const tweetContainer = document.createElement("div");
-    
-        // Apply the cssname to the tweetContainer
-        tweetContainer.className = `video-${videoCount} ${cssname}`;
-    
-        // Set the ID for the tweet container
-        tweetContainer.id = `tweet-${tweetId}`;
-    
-        // Add the Twitter widget script to the page and wait for it to load
-        const twitterWidgetScript = document.createElement("script");
-        twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
-        twitterWidgetScript.charset = "utf-8";
-        twitterWidgetScript.async = true;
-    
-        // Attach a load event listener to the script
-        twitterWidgetScript.addEventListener("load", () => {
-          // The Twitter widget script has loaded, and the tweet is now embedded.
-          // You can perform any additional actions here if needed.
-          window.twttr.widgets.createTweet(tweetId, tweetContainer);
-        });
-    
-        // Append the tweet container to the provided container
-        container.appendChild(tweetContainer);
-        container.appendChild(twitterWidgetScript);
-    
-      } catch (error) {
-        console.error("Error embedding Twitter content:", error);
+  
+    try {
+      // Validate container
+      if (!(container instanceof Node)) {
+        console.error("Container is not a valid DOM node.");
+        return;
       }
-    };
-    
-    
-
-    const embedX = (video, container, cssname) => {
-      const extractTwitterTweetId = (url) => {
-        const regex = /\/status\/(\d+)/;
-        const match = url.match(regex);
-        return match ? match[1] : null; // Return tweet ID or null
-      };
-    
-      try {
-        const videoUrl = video.videoUrl;
-        const tweetId = extractTwitterTweetId(videoUrl);
-    
-        if (!tweetId) {
-          throw new Error("Invalid video URL"); // Throw error if tweet ID not found
-        }
-    
-        const tweetContainer = document.createElement("div");
-        tweetContainer.className = `video-${videoCount} ${cssname}`;
-        tweetContainer.id = `tweet-${tweetId}`;
-    
-        const twitterWidgetScript = document.createElement("script");
-        twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
-        twitterWidgetScript.charset = "utf-8";
-        twitterWidgetScript.async = true;
-    
-        twitterWidgetScript.addEventListener("load", () => {
-          window.twttr.widgets.createTweet(tweetId, tweetContainer);
-        });
-    
-        container.appendChild(tweetContainer);
-        container.appendChild(twitterWidgetScript);
-      } catch (error) {
-        console.error("Error embedding Twitter content:", error);
+  
+      const clip = video.videoUrl; // Get the clip URL from the video object
+      const tweetId = extractTwitterTweetId(clip); // Extract tweet ID
+  
+      // Validate URL and Tweet ID
+      if (!clip || !tweetId) {
+        console.error("Invalid video clip URL or tweet ID.");
+        return;
       }
-    };
-    
-    
+  
+      // Create the blockquote element
+      const tweetContainer = document.createElement("blockquote");
+      tweetContainer.className = `twitter-tweet ${cssname}`;
+      tweetContainer.setAttribute("data-media-max-width", video.width);
+      tweetContainer.setAttribute("data-media-max-height", video.height);
+  
+      // Construct dynamic HTML based on the clip URL
+      tweetContainer.innerHTML = `
+        <p lang="en" style="min-width: ${video.width}px; display: block;">
+          <a href="${clip}" style="display: inline-block; min-width: ${video.width}px;">
+          </a>
+        </p>
+      `;
+  
+      // Append the tweet container to the provided container
+      container.appendChild(tweetContainer);
+  
+      // Add the Twitter widget script to the page
+      const twitterWidgetScript = document.createElement("script");
+      twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
+      twitterWidgetScript.charset = "utf-8";
+      twitterWidgetScript.async = true;
+  
+      // Attach a load event listener to the script
+      twitterWidgetScript.addEventListener("load", () => {
+        window.twttr.widgets.load(); // Load the widget
+      });
+  
+      // Append the script after the tweet container
+      container.appendChild(twitterWidgetScript);
+  
+    } catch (error) {
+      console.error("Error embedding Twitter content:", error);
+    }
+  };
 
 
+
+  
+
+
+  
+
+
+
+
+  const embedX = (video, container, cssname) => {
+    const extractTwitterTweetId = (url) => {
+      url = url.replace("x.com", "twitter.com");
+      const regex = /\/(?:i\/)?status\/(\d+)/;
+      const match = url.match(regex);
+      return match ? match[1] : null;
+    };
+  
+    try {
+      if (!(container instanceof Node)) {
+        console.error("Container is not a valid DOM node.");
+        return;
+      }
+  
+      const clip = video.videoUrl;
+      const tweetId = extractTwitterTweetId(clip);
+  
+      if (!clip || !tweetId) {
+        console.error("Invalid video clip URL or tweet ID.");
+        return;
+      }
+  
+      const tweetContainer = document.createElement("blockquote");
+      tweetContainer.className = `twitter-tweet ${cssname}`;
+      tweetContainer.setAttribute("data-media-max-width", video.width);
+      tweetContainer.setAttribute("data-media-max-height", video.height);
+  
+      // Construct the <a> tag with the correct URL
+      tweetContainer.innerHTML = `
+        <p lang="en" style="min-width: ${video.width}px; display: block;">
+          <a href="https://twitter.com/i/status/${tweetId}" style="display: inline-block; min-width: ${video.width}px;">
+          </a>
+        </p>
+      `;
+  
+      container.appendChild(tweetContainer);
+  
+      const twitterWidgetScript = document.createElement("script");
+      twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";
+      twitterWidgetScript.charset = "utf-8";
+      twitterWidgetScript.async = true;
+  
+      twitterWidgetScript.addEventListener("load", () => {
+        window.twttr.widgets.load();
+      });
+  
+      container.appendChild(twitterWidgetScript);
+  
+    } catch (error) {
+      console.error("Error embedding Twitter content:", error);
+    }
+  };
     
@@ -285,0 +315,0 @@ // Map to track embedded TikTok videos

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

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

Improved metrics

Total package byte prevSize

64024

increased by4.41%

Lines of code

885

increased by7.8%

Number of lines in readme file

278

increased by1.46%

No dependency changes