Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

embedia-vue

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

embedia-vue - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0-alpha.1

328

dist/index.es.js

@@ -1,35 +0,35 @@

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 h, onMounted as p, watch as w, openBlock as f, createElementBlock as y, normalizeClass as b, normalizeStyle as g, pushScopeId as $, popScopeId as x, createElementVNode as E } from "vue";
let u = 1;
const I = (t, e, n, r) => {
const o = t.clip, s = k(o);
if (!s)
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));
let c = document.getElementById(e);
c || (c = document.createElement("div"), c.id = e, document.body.appendChild(c));
let i = document.querySelector(`.${n}`);
i || (i = document.createElement("div"), i.className = `video-${r} ${n}`, c.appendChild(i));
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");
a.className = "instagram-media", a.setAttribute("data-instgrm-permalink", `https://www.instagram.com/p/${s}/`), a.setAttribute("data-instgrm-version", "13"), a.style.width = `${t.width}px`, a.style.height = `${t.height}px`, a.style.maxWidth = "400px", a.style.maxheight = "530px";
const l = document.createElement("a");
if (l.setAttribute("href", r), a.appendChild(l), c.appendChild(a), !document.getElementById("instagramEmbedScript")) {
if (l.href = o, a.appendChild(l), i.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);
d.async = !0, d.id = "instagramEmbedScript", d.src = "//www.instagram.com/embed.js", c.appendChild(d);
}
}, C = (e) => {
const t = /\/([a-zA-Z0-9_-]+)\/?$/, o = e.match(t);
return o ? o[1] : null;
}, I = (e) => {
const t = e.match(/\/(?:video|hub)\/([^_]+)/) || e.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
if (t && t[1])
return t[1];
}, k = (t) => {
const e = /\/([a-zA-Z0-9_-]+)\/?$/, n = t.match(e);
return n ? n[1] : null;
}, C = (t) => {
const e = t.match(/\/(?:video|hub)\/([^_]+)/) || t.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
if (e && e[1])
return e[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) => {
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);
}, _ = (t, e, n) => {
const r = t.clip, o = C(r), s = t.autoplay ? "1" : "0", c = t.controls ? "1" : "0", i = t.fullscreen ? "1" : "0", a = document.createElement("iframe");
a.src = `https://www.dailymotion.com/embed/video/${o}?autoplay=${s}&controls=${c}&fullscreen=${i}`, a.width = t.width || 640, a.height = t.height || 360, a.frameBorder = "0", a.allowFullscreen = !0, a.className = n, e.appendChild(a);
}, T = (t) => {
const e = t.match(/\/(\d+)/);
return e && e[1] ? e[1] : (console.error("Invalid Vimeo video URL"), "");
}, V = (t, e, n) => {
const r = t.width || 640, o = t.height || 360, s = t.controls, c = t.autoplay === "true", i = t.loop === "true", a = T(t.clip), l = document.createElement("div");
l.className = `video-${u} ${n}`, l.dataset.eWidth = r, l.dataset.eHeight = o, l.dataset.efullscreen = t.fullscreen, l.dataset.eVideoId = a, e.appendChild(l);
const d = document.createElement("script");

@@ -39,9 +39,9 @@ return d.src = "https://player.vimeo.com/api/player.js", d.async = !0, d.onload = () => {

id: a,
width: s,
height: r,
controls: i,
autoplay: n,
muted: !!n,
// Set muted to true if autoplay is true
loop: c
width: r,
height: o,
controls: s,
autoplay: c,
muted: c,
loop: i
// Set loop based on boolean value
}).ready().then(() => {

@@ -52,83 +52,109 @@ });

};
}, x = (e, t, o) => {
const s = (r) => {
const i = /\/status\/(\d+)/, n = r.match(i);
return n && n[1] ? n[1] : null;
}, A = (t, e, n) => {
const r = (o) => {
const s = /\/(?:i\/)?status\/(\d+)/, c = o.match(s);
return c ? c[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 (!(e instanceof Node)) {
console.error("Container is not a valid DOM node.");
return;
}
const o = t.clip, s = r(o);
if (!o || !s) {
console.error("Invalid video clip URL or tweet ID.");
return;
}
const c = document.createElement("blockquote");
c.className = `twitter-tweet ${n}`, c.setAttribute("data-media-max-width", t.width), c.setAttribute("data-media-max-height", t.height), c.innerHTML = `
<p lang="en" style="min-width: ${t.width}px; display: block;">
<a href="${o}" style="display: inline-block; min-width: ${t.width}px;">
</a>
</p>
`, e.appendChild(c);
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();
}), e.appendChild(i);
} catch (o) {
console.error("Error embedding Twitter content:", o);
}
}, V = (e, t, o) => {
const s = (r) => {
const i = /\/status\/(\d+)/, n = r.match(i);
return n ? n[1] : null;
}, S = (t, e, n) => {
const r = (o) => {
o = o.replace("x.com", "twitter.com");
const s = /\/(?:i\/)?status\/(\d+)/, c = o.match(s);
return c ? c[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 (!(e instanceof Node)) {
console.error("Container is not a valid DOM node.");
return;
}
const o = t.clip, s = r(o);
if (!o || !s) {
console.error("Invalid video clip URL or tweet ID.");
return;
}
const c = document.createElement("blockquote");
c.className = `twitter-tweet ${n}`, c.setAttribute("data-media-max-width", t.width), c.setAttribute("data-media-max-height", t.height), c.innerHTML = `
<p lang="en" style="min-width: ${t.width}px; display: block;">
<a href="https://twitter.com/i/status/${s}" style="display: inline-block; min-width: ${t.width}px;">
</a>
</p>
`, e.appendChild(c);
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();
}), e.appendChild(i);
} catch (o) {
console.error("Error embedding Twitter content:", o);
}
}, u = /* @__PURE__ */ new Map(), A = (e, t, o) => {
const s = e.videoUrl;
if (u.has(s) || u.has(s))
}, m = /* @__PURE__ */ new Map(), L = (t, e, n) => {
const r = t.clip;
if (m.has(r) || m.has(r))
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, ""));
m.set(r, !0);
const o = t.width || "100%", s = t.height || "100%", c = new XMLHttpRequest();
c.open("GET", `https://www.tiktok.com/oembed?url=${encodeURIComponent(r)}`, !0), c.onload = function() {
if (c.status >= 200 && c.status < 300) {
const i = JSON.parse(c.responseText);
i.html && (i.html = i.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"]')) {
if (a.className = `video-${l} ${n}`, a.style.width = o, a.style.height = s, a.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);
e ? e.appendChild(a) : document.body && document.body.appendChild(a);
} else
console.error("Failed to fetch TikTok oEmbed data: " + n.statusText);
}, n.onerror = function() {
console.error("Failed to fetch TikTok oEmbed data: " + c.statusText);
}, c.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) => {
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];
}, c.send();
}, N = (t, e, n) => {
const r = t.clip, o = t.autoplay === "true", s = o, c = t.width || 640, i = t.height || 360, a = document.createElement("iframe");
a.setAttribute("src", `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(r)}&width=${c}&height=${i}&show_text=false&autoplay=${o}&muted=${s}`), a.setAttribute("width", c), a.setAttribute("height", i), a.setAttribute("frameborder", "0"), t.fullscreen && a.setAttribute("allowfullscreen", "true"), a.className = `video-${u} ${n} custom-facebook`, u++, e.appendChild(a);
}, M = (t) => {
const e = t.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
if (e && e[1])
return e[1];
const n = t.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
if (n && n[2].length === 11)
return n[2];
throw new Error("Invalid YouTube video URL");
}, R = (e, t, o) => {
if (!t) {
}, R = (t, e, n) => {
if (!e) {
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 = 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()) || "";
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} {
const r = t.autoplay ? 1 : 0, o = t.autoplay || t.muted ? 1 : 0, s = t.autoplay || t.loop ? 1 : 0, c = M(t.clip), i = document.createElement("iframe");
i.src = `https://www.youtube.com/embed/${c}?autoplay=${r}&mute=${o}&loop=${s ? 1 : 0}&controls=${t.controls ? 1 : 0}`, i.width = t.width || 640, i.height = t.height || 360, i.frameborder = "0", i.style.border = "none", t.fullscreen && i.setAttribute("allow", "fullscreen"), i.className = n, e.appendChild(i);
}, v = (t) => {
var r;
const e = ((r = t.cssname) == null ? void 0 : r.trim()) || "";
if (!e.match(/^[a-zA-Z_][\w-]*$/))
throw console.error("Invalid class name:", e), new Error("Invalid class name");
if (!document.querySelector(`#default-style-${e}`)) {
const o = document.createElement("style");
o.id = `default-style-${e}`, o.textContent = `
.${e} {
display: flex;

@@ -141,34 +167,34 @@ justify-content: center;

}
`, document.head.appendChild(r);
`, document.head.appendChild(o);
}
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"))
R(e, o, t);
else if (e.videoUrl.includes("facebook.com") || e.videoUrl.includes("fb.com"))
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);
else if (e.videoUrl.includes("x.com"))
V(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);
else if (e.videoUrl.includes("instagram.com") || e.videoUrl.includes("instagram"))
U(e, o, t);
const n = document.querySelector(`.${e}`);
if (!n)
throw console.error("Container not found for class:", e), new Error("Container not found");
for (; n.firstChild; )
n.removeChild(n.firstChild);
if (t.clip.includes("youtube.com") || t.clip.includes("youtu.be"))
R(t, n, e);
else if (t.clip.includes("facebook.com") || t.clip.includes("fb.com"))
N(t, n, e);
else if (t.clip.includes("tiktok.com") || t.clip.includes("tiktok"))
L(t, n, e);
else if (t.clip.includes("twitter.com"))
A(t, n, e);
else if (t.clip.includes("x.com"))
S(t, n, e);
else if (t.clip.includes("vimeo.com"))
V(t, n, e);
else if (t.clip.includes("dailymotion.com") || t.clip.includes("dailymotion"))
_(t, n, e);
else if (t.clip.includes("instagram.com") || t.clip.includes("instagram"))
I(t, n, e);
else
throw new Error("Invalid video URL");
};
const B = (e, t) => {
const o = e.__vccOpts || e;
for (const [s, r] of t)
o[s] = r;
return o;
}, M = {
const U = (t, e) => {
const n = t.__vccOpts || t;
for (const [r, o] of e)
n[r] = o;
return n;
}, q = {
name: "EmbediaVue",

@@ -205,36 +231,36 @@ props: {

},
setup(e) {
const t = h("56.25%");
setup(t) {
const e = h("56.25%");
p(() => {
L({
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);
}), w(() => [e.width, e.height], ([s, r]) => {
o(s, r);
v({
videoUrl: t.clip,
width: t.width,
height: t.height,
autoplay: t.autoplay,
fullscreen: t.fullscreen,
controls: t.controls,
cssname: t.cssname
}), n(t.width, t.height);
}), w(() => [t.width, t.height], ([r, o]) => {
n(r, o);
}, { immediate: !0 });
function o(s, r) {
s && r ? t.value = `${r / s * 100}%` : t.value = "56.25%";
function n(r, o) {
r && o ? e.value = `${o / r * 100}%` : e.value = "56.25%";
}
return {
aspectRatio: t
aspectRatio: e
};
}
}, q = (e) => (v("data-v-d26b150f"), e = e(), $(), e), j = /* @__PURE__ */ q(() => /* @__PURE__ */ E("div", { class: "video-content" }, null, -1)), z = [
j
}, D = (t) => ($("data-v-d26b150f"), t = t(), x(), t), B = /* @__PURE__ */ D(() => /* @__PURE__ */ E("div", { class: "video-content" }, null, -1)), H = [
B
];
function D(e, t, o, s, r, i) {
function j(t, e, n, r, o, s) {
return f(), y("div", {
class: b([o.cssname, "responsive-container"]),
style: g({ "--aspect-ratio": s.aspectRatio, width: "auto", maxWidth: "100%" })
}, z, 6);
class: b([n.cssname, "responsive-container"]),
style: g({ "--aspect-ratio": r.aspectRatio, width: "auto", maxWidth: "100%" })
}, H, 6);
}
const F = /* @__PURE__ */ B(M, [["render", D], ["__scopeId", "data-v-d26b150f"]]);
const O = /* @__PURE__ */ U(q, [["render", j], ["__scopeId", "data-v-d26b150f"]]);
export {
F as EmbediaVue
O as EmbediaVue
};

@@ -1,3 +0,13 @@

"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=`
.${t} {
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue");let h=1;const p=(t,e,n,r)=>{const o=t.clip,s=w(o);if(!s)throw new Error("Invalid Instagram video URL");let c=document.getElementById(e);c||(c=document.createElement("div"),c.id=e,document.body.appendChild(c));let i=document.querySelector(`.${n}`);i||(i=document.createElement("div"),i.className=`video-${r} ${n}`,c.appendChild(i));const a=document.createElement("blockquote");a.className="instagram-media",a.setAttribute("data-instgrm-permalink",`https://www.instagram.com/p/${s}/`),a.setAttribute("data-instgrm-version","13"),a.style.width=`${t.width}px`,a.style.height=`${t.height}px`,a.style.maxWidth="400px",a.style.maxheight="530px";const l=document.createElement("a");if(l.href=o,a.appendChild(l),i.appendChild(a),!document.getElementById("instagramEmbedScript")){const d=document.createElement("script");d.async=!0,d.id="instagramEmbedScript",d.src="//www.instagram.com/embed.js",c.appendChild(d)}},w=t=>{const e=/\/([a-zA-Z0-9_-]+)\/?$/,n=t.match(e);return n?n[1]:null},f=t=>{const e=t.match(/\/(?:video|hub)\/([^_]+)/)||t.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);if(e&&e[1])return e[1];throw new Error("Invalid Dailymotion video URL")},y=(t,e,n)=>{const r=t.clip,o=f(r),s=t.autoplay?"1":"0",c=t.controls?"1":"0",i=t.fullscreen?"1":"0",a=document.createElement("iframe");a.src=`https://www.dailymotion.com/embed/video/${o}?autoplay=${s}&controls=${c}&fullscreen=${i}`,a.width=t.width||640,a.height=t.height||360,a.frameBorder="0",a.allowFullscreen=!0,a.className=n,e.appendChild(a)},b=t=>{const e=t.match(/\/(\d+)/);return e&&e[1]?e[1]:(console.error("Invalid Vimeo video URL"),"")},g=(t,e,n)=>{const r=t.width||640,o=t.height||360,s=t.controls,c=t.autoplay==="true",i=t.loop==="true",a=b(t.clip),l=document.createElement("div");l.className=`video-${h} ${n}`,l.dataset.eWidth=r,l.dataset.eHeight=o,l.dataset.efullscreen=t.fullscreen,l.dataset.eVideoId=a,e.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:r,height:o,controls:s,autoplay:c,muted:c,loop:i}).ready().then(()=>{})},document.body.appendChild(d),()=>{l&&(l.innerHTML=""),document.body.removeChild(d)}},$=(t,e,n)=>{const r=o=>{const s=/\/(?:i\/)?status\/(\d+)/,c=o.match(s);return c?c[1]:null};try{if(!(e instanceof Node)){console.error("Container is not a valid DOM node.");return}const o=t.clip,s=r(o);if(!o||!s){console.error("Invalid video clip URL or tweet ID.");return}const c=document.createElement("blockquote");c.className=`twitter-tweet ${n}`,c.setAttribute("data-media-max-width",t.width),c.setAttribute("data-media-max-height",t.height),c.innerHTML=`
<p lang="en" style="min-width: ${t.width}px; display: block;">
<a href="${o}" style="display: inline-block; min-width: ${t.width}px;">
</a>
</p>
`,e.appendChild(c);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()}),e.appendChild(i)}catch(o){console.error("Error embedding Twitter content:",o)}},E=(t,e,n)=>{const r=o=>{o=o.replace("x.com","twitter.com");const s=/\/(?:i\/)?status\/(\d+)/,c=o.match(s);return c?c[1]:null};try{if(!(e instanceof Node)){console.error("Container is not a valid DOM node.");return}const o=t.clip,s=r(o);if(!o||!s){console.error("Invalid video clip URL or tweet ID.");return}const c=document.createElement("blockquote");c.className=`twitter-tweet ${n}`,c.setAttribute("data-media-max-width",t.width),c.setAttribute("data-media-max-height",t.height),c.innerHTML=`
<p lang="en" style="min-width: ${t.width}px; display: block;">
<a href="https://twitter.com/i/status/${s}" style="display: inline-block; min-width: ${t.width}px;">
</a>
</p>
`,e.appendChild(c);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()}),e.appendChild(i)}catch(o){console.error("Error embedding Twitter content:",o)}},u=new Map,x=(t,e,n)=>{const r=t.clip;if(u.has(r)||u.has(r))return;u.set(r,!0);const o=t.width||"100%",s=t.height||"100%",c=new XMLHttpRequest;c.open("GET",`https://www.tiktok.com/oembed?url=${encodeURIComponent(r)}`,!0),c.onload=function(){if(c.status>=200&&c.status<300){const i=JSON.parse(c.responseText);i.html&&(i.html=i.html.replace(/<script[^>]*>.*<\/script>/gi,""));const a=document.createElement("div"),l=Date.now();if(a.className=`video-${l} ${n}`,a.style.width=o,a.style.height=s,a.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)}e?e.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()},I=(t,e,n)=>{const r=t.clip,o=t.autoplay==="true",s=o,c=t.width||640,i=t.height||360,a=document.createElement("iframe");a.setAttribute("src",`https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(r)}&width=${c}&height=${i}&show_text=false&autoplay=${o}&muted=${s}`),a.setAttribute("width",c),a.setAttribute("height",i),a.setAttribute("frameborder","0"),t.fullscreen&&a.setAttribute("allowfullscreen","true"),a.className=`video-${h} ${n} custom-facebook`,h++,e.appendChild(a)},k=t=>{const e=t.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);if(e&&e[1])return e[1];const n=t.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);if(n&&n[2].length===11)return n[2];throw new Error("Invalid YouTube video URL")},C=(t,e,n)=>{if(!e){console.error("Container element not found.");return}const r=t.autoplay?1:0,o=t.autoplay||t.muted?1:0,s=t.autoplay||t.loop?1:0,c=k(t.clip),i=document.createElement("iframe");i.src=`https://www.youtube.com/embed/${c}?autoplay=${r}&mute=${o}&loop=${s?1:0}&controls=${t.controls?1:0}`,i.width=t.width||640,i.height=t.height||360,i.frameborder="0",i.style.border="none",t.fullscreen&&i.setAttribute("allow","fullscreen"),i.className=n,e.appendChild(i)},_=t=>{var r;const e=((r=t.cssname)==null?void 0:r.trim())||"";if(!e.match(/^[a-zA-Z_][\w-]*$/))throw console.error("Invalid class name:",e),new Error("Invalid class name");if(!document.querySelector(`#default-style-${e}`)){const o=document.createElement("style");o.id=`default-style-${e}`,o.textContent=`
.${e} {
display: flex;

@@ -10,2 +20,2 @@ justify-content: center;

}
`,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(o)}const n=document.querySelector(`.${e}`);if(!n)throw console.error("Container not found for class:",e),new Error("Container not found");for(;n.firstChild;)n.removeChild(n.firstChild);if(t.clip.includes("youtube.com")||t.clip.includes("youtu.be"))C(t,n,e);else if(t.clip.includes("facebook.com")||t.clip.includes("fb.com"))I(t,n,e);else if(t.clip.includes("tiktok.com")||t.clip.includes("tiktok"))x(t,n,e);else if(t.clip.includes("twitter.com"))$(t,n,e);else if(t.clip.includes("x.com"))E(t,n,e);else if(t.clip.includes("vimeo.com"))g(t,n,e);else if(t.clip.includes("dailymotion.com")||t.clip.includes("dailymotion"))y(t,n,e);else if(t.clip.includes("instagram.com")||t.clip.includes("instagram"))p(t,n,e);else throw new Error("Invalid video URL")};const T=(t,e)=>{const n=t.__vccOpts||t;for(const[r,o]of e)n[r]=o;return n},V={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(t){const e=m.ref("56.25%");m.onMounted(()=>{_({videoUrl:t.clip,width:t.width,height:t.height,autoplay:t.autoplay,fullscreen:t.fullscreen,controls:t.controls,cssname:t.cssname}),n(t.width,t.height)}),m.watch(()=>[t.width,t.height],([r,o])=>{n(r,o)},{immediate:!0});function n(r,o){r&&o?e.value=`${o/r*100}%`:e.value="56.25%"}return{aspectRatio:e}}},S=t=>(m.pushScopeId("data-v-d26b150f"),t=t(),m.popScopeId(),t),A=S(()=>m.createElementVNode("div",{class:"video-content"},null,-1)),v=[A];function L(t,e,n,r,o,s){return m.openBlock(),m.createElementBlock("div",{class:m.normalizeClass([n.cssname,"responsive-container"]),style:m.normalizeStyle({"--aspect-ratio":r.aspectRatio,width:"auto",maxWidth:"100%"})},v,6)}const M=T(V,[["render",L],["__scopeId","data-v-d26b150f"]]);exports.EmbediaVue=M;
{
"name": "embedia-vue",
"version": "1.1.3",
"version": "1.2.0-alpha.1",
"description": "A vue component package to embed videos such as Facebook, Instagram, TikTok, YouTube/Shorts, Twitter/X, Vimeo, and Dailymotion.",

@@ -44,4 +44,6 @@ "main": "dist/index.js",

"twitter",
"x",
"shorts",
"javascript",
"typescript",
"vue"

@@ -48,0 +50,0 @@ ],

@@ -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 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.

@@ -240,3 +245,2 @@ ___________

.embed-clip {
float: right;
border: 2px solid green;

@@ -243,0 +247,0 @@ }

@@ -42,17 +42,17 @@ import { embedYouTube, embedFacebook, embedTiktok, embedTwitter, embedX, embedVimeo, embedDailymotion, embedInstagram } from './embedLink';

if (video.videoUrl.includes("youtube.com") || video.videoUrl.includes("youtu.be")) {
if (video.clip.includes("youtube.com") || video.clip.includes("youtu.be")) {
embedYouTube(video, container, cssname);
} else if (video.videoUrl.includes("facebook.com") || video.videoUrl.includes("fb.com")) {
} else if (video.clip.includes("facebook.com") || video.clip.includes("fb.com")) {
embedFacebook(video, container, cssname);
} else if (video.videoUrl.includes("tiktok.com") || video.videoUrl.includes("tiktok")) {
} else if (video.clip.includes("tiktok.com") || video.clip.includes("tiktok")) {
embedTiktok(video, container, cssname);
} else if (video.videoUrl.includes("twitter.com")) {
} else if (video.clip.includes("twitter.com")) {
embedTwitter(video, container, cssname);
} else if (video.videoUrl.includes("x.com")) {
} else if (video.clip.includes("x.com")) {
embedX(video, container, cssname);
} else if (video.videoUrl.includes("vimeo.com")) {
} else if (video.clip.includes("vimeo.com")) {
embedVimeo(video, container, cssname);
} else if (video.videoUrl.includes("dailymotion.com") || video.videoUrl.includes("dailymotion")) {
} else if (video.clip.includes("dailymotion.com") || video.clip.includes("dailymotion")) {
embedDailymotion(video, container, cssname);
} else if (video.videoUrl.includes("instagram.com") || video.videoUrl.includes("instagram")) {
} else if (video.clip.includes("instagram.com") || video.clip.includes("instagram")) {
embedInstagram(video, container, cssname);

@@ -59,0 +59,0 @@ } else {

@@ -28,195 +28,195 @@ /* # Embedia Vue core license

let videoCount = 1; // Initialize videoCount
const embedInstagram = (video, containerId, cssClassName, videoCount) => {
const clipUrl = video.clip;
// 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 = `${video.height}px`;
blockquote.style.maxWidth = '400px';
blockquote.style.maxheight = '530px';
const embedInstagram = (video, container, cssname, videoCount) => {
const videoUrl = video.videoUrl;
// 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);
}
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;
};
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");
};
const embedDailymotion = (video, container, cssname) => {
const clip = video.clip;
const videoId = extractDailymotionVideoId(clip);
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
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.clip);
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
});
};
// 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) => {
const videoIdMatch = url.match(/\/(?:video|hub)\/([^_]+)/) || url.match(/(?:^|\/)([a-z0-9]+)(?:_[\w-]*)?$/i);
if (videoIdMatch && videoIdMatch[1]) {
return videoIdMatch[1];
document.body.appendChild(script);
return () => {
if (playerDiv) {
playerDiv.innerHTML = "";
}
throw new Error("Invalid Dailymotion video URL");
document.body.removeChild(script);
};
};
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
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;
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
});
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
};
document.body.appendChild(script);
return () => {
if (playerDiv) {
playerDiv.innerHTML = "";
try {
// Validate container
if (!(container instanceof Node)) {
console.error("Container is not a valid DOM node.");
return;
}
document.body.removeChild(script);
};
};
const clip = video.clip; // Get the clip URL from the video object
const tweetId = extractTwitterTweetId(clip); // Extract tweet ID
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
// Validate URL and Tweet ID
if (!clip || !tweetId) {
console.error("Invalid video clip URL or tweet ID.");
return;
}
};
try {
const videoUrl = video.videoUrl;
const tweetId = extractTwitterTweetId(videoUrl);
// 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);
// Create a div to hold the embedded tweet
const tweetContainer = document.createElement("div");
// 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>
`;
// Apply the cssname to the tweetContainer
tweetContainer.className = `video-${videoCount} ${cssname}`;
// Append the tweet container to the provided container
container.appendChild(tweetContainer);
// 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
// Add the Twitter widget script to the page
const twitterWidgetScript = document.createElement("script");

@@ -229,9 +229,6 @@ twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";

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);
window.twttr.widgets.load(); // Load the widget
});
// Append the tweet container to the provided container
container.appendChild(tweetContainer);
// Append the script after the tweet container
container.appendChild(twitterWidgetScript);

@@ -243,24 +240,50 @@

};
const embedX = (video, container, cssname) => {
const extractTwitterTweetId = (url) => {
const regex = /\/status\/(\d+)/;
url = url.replace("x.com", "twitter.com");
const regex = /\/(?:i\/)?status\/(\d+)/;
const match = url.match(regex);
return match ? match[1] : null; // Return tweet ID or null
return match ? match[1] : null;
};
try {
const videoUrl = video.videoUrl;
const tweetId = extractTwitterTweetId(videoUrl);
if (!(container instanceof Node)) {
console.error("Container is not a valid DOM node.");
return;
}
if (!tweetId) {
throw new Error("Invalid video URL"); // Throw error if tweet ID not found
const clip = video.clip;
const tweetId = extractTwitterTweetId(clip);
if (!clip || !tweetId) {
console.error("Invalid video clip URL or tweet ID.");
return;
}
const tweetContainer = document.createElement("div");
tweetContainer.className = `video-${videoCount} ${cssname}`;
tweetContainer.id = `tweet-${tweetId}`;
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");

@@ -272,7 +295,7 @@ twitterWidgetScript.src = "https://platform.twitter.com/widgets.js";

twitterWidgetScript.addEventListener("load", () => {
window.twttr.widgets.createTweet(tweetId, tweetContainer);
window.twttr.widgets.load();
});
container.appendChild(tweetContainer);
container.appendChild(twitterWidgetScript);
} catch (error) {

@@ -283,6 +306,8 @@ console.error("Error embedding Twitter content:", error);

// Map to track embedded TikTok videos
// Map to track embedded TikTok videos

@@ -292,6 +317,6 @@ const embeddedTikTokVideos = new Map();

const embedTiktok = (video, container, cssname) => {
const videoUrl = video.videoUrl;
const clip = video.clip;
// Check if the TikTok video URL has already been embedded
if (embeddedTikTokVideos.has(videoUrl)) {
if (embeddedTikTokVideos.has(clip)) {
// Video has already been embedded, no need to embed it again

@@ -303,3 +328,3 @@ return;

if (embeddedTikTokVideos.has(videoUrl)) {
if (embeddedTikTokVideos.has(clip)) {

@@ -317,3 +342,3 @@ // Video has already been embedded, no need to embed it again

embeddedTikTokVideos.set(videoUrl, true);
embeddedTikTokVideos.set(clip, true);

@@ -330,3 +355,3 @@

xhr.open('GET', `https://www.tiktok.com/oembed?url=${encodeURIComponent(videoUrl)}`, true);
xhr.open('GET', `https://www.tiktok.com/oembed?url=${encodeURIComponent(clip)}`, true);

@@ -428,107 +453,103 @@

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 emWidth = video.width || 640;
const emHeight = video.height || 360;
// 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');
if (video.fullscreen) {
iframe.setAttribute('allowfullscreen', 'true');
}
iframe.className = `video-${videoCount} ${cssname} custom-facebook`;
videoCount++;
container.appendChild(iframe);
};
// Function to extract YouTube video ID from a URL
const extractYouTubeVideoId = (url) => {
// Check if it's a YouTube Shorts URL
const shortsMatch = url.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
if (shortsMatch && shortsMatch[1]) {
return shortsMatch[1];
}
// Check if it's a regular YouTube video URL
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
if (videoIdMatch && videoIdMatch[2].length === 11) {
return videoIdMatch[2];
}
throw new Error("Invalid YouTube video URL");
};
const embedYouTube = (video, container, cssname) => {
if (!container) {
console.error("Container element not found.");
return;
}
const autoplayValue = video.autoplay ? 1 : 0;
const muteValue = video.autoplay ? 1 : video.muted ? 1 : 0;
const loopValue = video.autoplay ? 1 : video.loop ? 1 : 0;
const videoId = extractYouTubeVideoId(video.videoUrl);
// Create an iframe element for the YouTube player
const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayValue}&mute=${muteValue}&loop=${loopValue ? 1 : 0}&controls=${video.controls ? 1 : 0}`;
iframe.width = video.width || 640;
iframe.height = video.height || 360;
iframe.frameborder = "0";
iframe.style.border = "none";
if (video.fullscreen) {
iframe.setAttribute("allow", "fullscreen");
}
// Apply the cssname to the iframe element
iframe.className = cssname;
// Append the iframe to the provided container
container.appendChild(iframe);
};
const embedFacebook = (video, container, cssname) => {
const clip = video.clip;
const autoplay = video.autoplay === "true";
const muted = autoplay; // Set muted to true if autoplay is true
const emWidth = video.width || 640;
const emHeight = video.height || 360;
// 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(clip)}&width=${emWidth}&height=${emHeight}&show_text=false&autoplay=${autoplay}&muted=${muted}`);
iframe.setAttribute('width', emWidth);
iframe.setAttribute('height', emHeight);
iframe.setAttribute('frameborder', '0');
if (video.fullscreen) {
iframe.setAttribute('allowfullscreen', 'true');
}
iframe.className = `video-${videoCount} ${cssname} custom-facebook`;
videoCount++;
container.appendChild(iframe);
};
// Function to extract YouTube video ID from a URL
const extractYouTubeVideoId = (url) => {
// Check if it's a YouTube Shorts URL
const shortsMatch = url.match(/(?:shorts\/|v=)([a-zA-Z0-9_-]{11})/);
if (shortsMatch && shortsMatch[1]) {
return shortsMatch[1];
}
// Check if it's a regular YouTube video URL
const videoIdMatch = url.match(/(\?v=|\/embed\/|\/watch\?v=|\/v\/|\/e\/|youtu.be\/)([^#&?]*).*/);
if (videoIdMatch && videoIdMatch[2].length === 11) {
return videoIdMatch[2];
}
throw new Error("Invalid YouTube video URL");
};
const embedYouTube = (video, container, cssname) => {
if (!container) {
console.error("Container element not found.");
return;
}
const autoplayValue = video.autoplay ? 1 : 0;
const muteValue = video.autoplay ? 1 : video.muted ? 1 : 0;
const loopValue = video.autoplay ? 1 : video.loop ? 1 : 0;
const videoId = extractYouTubeVideoId(video.clip);
// Create an iframe element for the YouTube player
const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplayValue}&mute=${muteValue}&loop=${loopValue ? 1 : 0}&controls=${video.controls ? 1 : 0}`;
iframe.width = video.width || 640;
iframe.height = video.height || 360;
iframe.frameborder = "0";
iframe.style.border = "none";
if (video.fullscreen) {
iframe.setAttribute("allow", "fullscreen");
}
// Apply the cssname to the iframe element
iframe.className = cssname;
// Append the iframe to the provided container
container.appendChild(iframe);
};
// Export functions and types

@@ -535,0 +556,0 @@ export { embedYouTube, embedFacebook, embedTiktok, embedTwitter, embedX, embedVimeo, embedDailymotion, embedInstagram };

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc