// this is an example of what the data will look like when a user imports your component window.datanrGgY = {}; datanrGgY['video'] = 'https://www.youtube.com/watch?v=XqZsoesa55w';

"use strict"; (function () { // ---------- Always inject CSS ---------- (function injectCSS() { var css = ` /* Root wrapper */ .datanrGgY-embed{ border-radius: 20px; width:100%; margin:0 !important; padding:0; box-sizing:border-box; min-width:0; /* important if parent is flex */ overflow-x:hidden; /* safety belt for weird embeds */ } /* Ensure children can shrink */ .datanrGgY-embed *{ box-sizing:border-box; max-width:100%; } /* Message / fallback state */ .datanrGgY-message{ display:flex; align-items:flex-start; gap:12px; width:100%; max-width:560px; padding:16px; border:none; border-radius:14px; background:#ffdfdf; color:#0f172a; font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.35; } .datanrGgY-embed.has-message{ border-radius:0; } .datanrGgY-message-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; background:#ffc4c4; font-size:31px; font-weight:700; line-height:1; } .datanrGgY-message-icon svg{ fill:#e42020; } .datanrGgY-message-body{ min-width:0; } .datanrGgY-message-title{ color:#10151a; font-size:15px; font-weight:700; margin:0; } .datanrGgY-message-detail{ font-size:13px; color:#10151a; } /* YOUTUBE: responsive 16:9 */ .datanrGgY-embed.youtube-wrapper{ position:relative; aspect-ratio:16 / 9; max-height:660px; width:100%; min-width:0; } .datanrGgY-embed.youtube-wrapper iframe{ width:100%; height:100%; border:0; display:block; } /* YOUTUBE SHORTS: responsive 9:16, left-aligned */ .datanrGgY-embed.youtube-wrapper.youtube-shorts-wrapper{ aspect-ratio:9 / 16; width:min(360px, 100%); max-height:660px; overflow:hidden; } .datanrGgY-embed.youtube-wrapper.youtube-shorts-wrapper iframe{ width:100%; height:100%; border:0; display:block; } /* Instagram */ .datanrGgY-embed.instagram-wrapper { border-radius: 0; } .datanrGgY-embed.instagram-wrapper .instagram-media{ margin:0 !important; width:100% !important; max-width: 450px !important; min-width: 0 !important; box-shadow:none !important; border-radius: 10px !important; } /* X / Twitter */ .datanrGgY-embed.x-wrapper { border-radius: 0; width:100%; } .datanrGgY-embed.x-wrapper .twitter-tweet, .datanrGgY-embed.x-wrapper .twitter-tweet-rendered{ margin:0 !important; width:550px !important; max-width:100% !important; } /* X's widgets.js can put flex-grow:1 inline on the generated iframe. Keep the iframe hitbox close to the actual tweet width instead of stretching full post width. */ .datanrGgY-embed.x-wrapper iframe{ flex-grow:0 !important; flex-shrink:0 !important; width:550px !important; max-width:100% !important; margin:0 !important; display:block !important; border:0 !important; } /* TikTok */ .datanrGgY-embed.tiktok-wrapper { border-radius: 0; width:100%; } /* This is the actual visible TikTok media column */ .datanrGgY-tiktok-inner{ width:var(--datanrGgY-tiktok-width, 325px); max-width:100%; margin:0 !important; } /* TikTok's oEmbed blockquote */ .datanrGgY-tiktok-inner .tiktok-embed{ width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 !important; } /* TikTok-generated iframe */ .datanrGgY-tiktok-inner iframe{ width:100% !important; max-width:100% !important; margin:0 !important; display:block !important; border:0 !important; } /* RedGIFs */ .datanrGgY-embed.redgifs-wrapper p { display: none; } .datanrGgY-embed .redgifs-media{ display:block; width:100%; aspect-ratio:16 / 9; max-height:660px; border:0; } /* SoundCloud */ .datanrGgY-embed.soundcloud-wrapper { border-radius: 0; } /* Generic iframe (Vimeo, SoundCloud, etc.) Do not let this rule touch TikTok or X, which need their own width behavior. */ .datanrGgY-embed:not(.tiktok-wrapper):not(.x-wrapper) iframe{ display:block; margin:0; width:100%; max-width:100%; border:0; } /* -------- Constrained preview mode (driven by body[data-max-height]) -------- */ /* For 16:9 media wrappers (YouTube + RedGIFs): height-driven sizing */ .datanrGgY-embed.is-max-constrained.youtube-wrapper, .datanrGgY-embed.is-max-constrained.redgifs-wrapper{ aspect-ratio: 16 / 9; height: min(var(--datanrGgY-maxh), (100vw * 9 / 16)); max-height: var(--datanrGgY-maxh); width: auto; max-width: min(calc(var(--datanrGgY-maxh) * 16 / 9), 100%); overflow: hidden; } /* Shorts override for constrained preview mode */ .datanrGgY-embed.is-max-constrained.youtube-wrapper.youtube-shorts-wrapper{ aspect-ratio: 9 / 16; height: min(var(--datanrGgY-maxh), 660px, calc(100vw * 16 / 9)); max-height: var(--datanrGgY-maxh); width: auto; max-width: min(calc(var(--datanrGgY-maxh) * 9 / 16), 360px, 100%); overflow: hidden; } /* Ensure iframe fills the wrapper when constrained */ .datanrGgY-embed.is-max-constrained.youtube-wrapper iframe, .datanrGgY-embed.is-max-constrained.redgifs-wrapper iframe{ width: 100%; height: 100%; } `; var styleEl = document.createElement("style"); styleEl.type = "text/css"; styleEl.textContent = css; document.head.appendChild(styleEl); })(); // ---------- Data ---------- var rawUrl = (window.datanrGgY && typeof window.datanrGgY.video === "string" ? window.datanrGgY.video : "" ).trim(); // ---------- Create the wrapper div (ALWAYS) ---------- var scriptEl = document.currentScript; var container = document.createElement("div"); container.className = "datanrGgY-embed"; scriptEl.parentNode.insertBefore(container, scriptEl); // If the host page constrained this iframe's visible height, honor it. applyMaxHeightConstraint(container); function showMessage(title, detail) { container.classList.add("has-message"); container.innerHTML = ""; var message = document.createElement("div"); message.className = "datanrGgY-message"; var icon = document.createElement("div"); icon.className = "datanrGgY-message-icon"; icon.setAttribute("aria-hidden", "true"); icon.innerHTML = ''; var body = document.createElement("div"); body.className = "datanrGgY-message-body"; var titleEl = document.createElement("div"); titleEl.className = "datanrGgY-message-title"; titleEl.textContent = title || "Embed unavailable"; var detailEl = document.createElement("div"); detailEl.className = "datanrGgY-message-detail"; detailEl.textContent = detail || "This content could not be loaded as an embed."; body.appendChild(titleEl); body.appendChild(detailEl); message.appendChild(icon); message.appendChild(body); container.appendChild(message); } if (!rawUrl) { showMessage( "No link provided", "Paste a supported social media URL to show an embed." ); return; } // ---------- Detect provider ---------- var url; try { url = new URL(rawUrl); } catch (e) { showMessage( "Invalid URL", "Check the link and try again with a supported social media URL." ); return; } var host = url.hostname.replace(/^www\./, "").toLowerCase(); var provider = null; if (host === "youtu.be" || host.endsWith("youtube.com")) { provider = "youtube"; } else if (host.endsWith("tiktok.com")) { provider = "tiktok"; } else if (host.endsWith("instagram.com")) { provider = "instagram"; } else if (host === "x.com" || host.endsWith("twitter.com")) { provider = "x"; } else if (host.endsWith("soundcloud.com")) { provider = "soundcloud"; } else if (host.endsWith("vimeo.com")) { provider = "vimeo"; } else if (host.endsWith("redgifs.com")) { provider = "redgifs"; } if (!provider) { showMessage( "Platform not supported", "Paste a YouTube, TikTok, Instagram, X, SoundCloud, Vimeo, or RedGIFs link." ); return; } // ---------- Instagram special case (no oEmbed) ---------- if (provider === "instagram") { container.classList.add("instagram-wrapper"); setupInstagramEmbed(rawUrl, container); return; } // ---------- RedGIFs special case (manual iframe embed) ---------- if (provider === "redgifs") { setupRedgifsEmbed(url, container); return; } var isYouTubeShortsDatanrGgY = provider === "youtube" && isYouTubeShortsUrlDatanrGgY(url); // ---------- YouTube gets responsive wrapper CSS ---------- if (provider === "youtube") { container.classList.add("youtube-wrapper"); if (isYouTubeShortsDatanrGgY) { container.classList.add("youtube-shorts-wrapper"); } } if (provider === "tiktok") { container.classList.add("tiktok-wrapper"); } if (provider === "soundcloud") { container.classList.add("soundcloud-wrapper"); } if (provider === "x") { container.classList.add("x-wrapper"); } // ---------- oEmbed for remaining providers ---------- var encoded = encodeURIComponent(rawUrl); var oembedUrl = ""; switch (provider) { case "youtube": oembedUrl = "https://www.youtube.com/oembed?format=json&url=" + encoded; break; case "tiktok": oembedUrl = "https://www.tiktok.com/oembed?url=" + encoded; break; case "x": oembedUrl = "https://publish.twitter.com/oembed?omit_script=1&url=" + encoded; break; case "soundcloud": oembedUrl = "https://soundcloud.com/oembed?format=json&url=" + encoded; break; case "vimeo": oembedUrl = "https://vimeo.com/api/oembed.json?url=" + encoded; break; } if (!oembedUrl) { showEmbedFailureDatanrGgY(provider); return; } fetch(oembedUrl) .then(function (r) { if (!r.ok) { var err = new Error(provider + " oEmbed failed with status " + r.status); err.status = r.status; throw err; } return r.json(); }) .then(function (data) { if (!data || !data.html) { showEmbedFailureDatanrGgY(provider); return; } container.classList.remove("has-message"); if (provider === "tiktok") { renderTikTokEmbed(data, container); } else { container.innerHTML = data.html; activateScripts(container); } // YouTube oEmbed may inject explicit width/height attributes; remove them so CSS wins. if (provider === "youtube") { var yt = container.querySelector("iframe"); if (yt) { yt.removeAttribute("width"); yt.removeAttribute("height"); yt.style.width = "100%"; yt.style.height = "100%"; yt.style.display = "block"; } } if (provider === "x") { loadTwitterScript(); } }) .catch(function (err) { console.warn("datanrGgY embed failed:", err); showEmbedFailureDatanrGgY(provider, err && err.status); }); // ========= Helpers ========= function isYouTubeShortsUrlDatanrGgY(urlObj) { var host = urlObj.hostname.replace(/^www\./, "").toLowerCase(); if (!(host === "youtu.be" || host.endsWith("youtube.com"))) { return false; } var parts = urlObj.pathname.split("/").filter(Boolean); return parts[0] === "shorts" && !!parts[1]; } function showEmbedFailureDatanrGgY(provider, status) { if (provider === "youtube" && (status === 401 || status === 403)) { showMessage( "This YouTube video cannot be embedded", "Playback on other websites appears to be disabled by the uploader." ); return; } if (provider === "youtube") { showMessage( "This YouTube video could not be loaded", "The video may be private, deleted, age-restricted, region-blocked, or unavailable for embedding." ); return; } var platformName = getPlatformNameDatanrGgY(provider); showMessage( platformName + " embed unavailable", "This content could not be loaded as an embed. It may be private, deleted, restricted, or blocked from being embedded." ); } function getPlatformNameDatanrGgY(provider) { switch (provider) { case "youtube": return "YouTube"; case "tiktok": return "TikTok"; case "instagram": return "Instagram"; case "x": return "X"; case "soundcloud": return "SoundCloud"; case "vimeo": return "Vimeo"; case "redgifs": return "RedGIFs"; default: return "This"; } } function renderTikTokEmbed(data, container) { var thumbnailWidth = Number(data.thumbnail_width); var thumbnailHeight = Number(data.thumbnail_height); var isHorizontal = Number.isFinite(thumbnailWidth) && Number.isFinite(thumbnailHeight) && thumbnailWidth > thumbnailHeight; var embedWidth = isHorizontal ? 605 : 325; container.style.setProperty( "--datanrGgY-tiktok-width", embedWidth + "px" ); var inner = document.createElement("div"); inner.className = "datanrGgY-tiktok-inner"; inner.innerHTML = data.html; container.innerHTML = ""; container.appendChild(inner); activateScripts(inner); } function applyMaxHeightConstraint(el) { var mh = ""; var cfg = window.datanrGgY_config && typeof window.datanrGgY_config === "object" ? window.datanrGgY_config : null; if (cfg && typeof cfg.maxHeight === "number" && cfg.maxHeight > 0) { mh = cfg.maxHeight + "px"; } if (!mh && document.body) { mh = (document.body.dataset && document.body.dataset.maxHeight) || document.body.getAttribute("data-max-height") || ""; } mh = String(mh || "").trim(); if (!mh) { el.classList.remove("is-max-constrained"); el.style.removeProperty("--datanrGgY-maxh"); return; } el.style.setProperty("--datanrGgY-maxh", mh); el.classList.add("is-max-constrained"); } function activateScripts(root) { var scripts = root.querySelectorAll("script"); scripts.forEach(function (oldScript) { var s = document.createElement("script"); Array.prototype.forEach.call(oldScript.attributes, function (a) { s.setAttribute(a.name, a.value); }); if (oldScript.textContent) s.textContent = oldScript.textContent; oldScript.parentNode.replaceChild(s, oldScript); }); } function loadTwitterScript() { var s = document.createElement("script"); s.async = true; s.src = "https://platform.twitter.com/widgets.js"; s.onload = function () { if (window.twttr && window.twttr.widgets) window.twttr.widgets.load(); }; document.body.appendChild(s); } function setupInstagramEmbed(rawUrl, container) { container.classList.remove("has-message"); var cleanUrl = rawUrl.split("?")[0]; container.innerHTML = '

' + '' + "View Instagram post" + "" + "

"; var s = document.createElement("script"); s.async = true; s.src = "https://www.instagram.com/embed.js"; s.onload = function () { if ( window.instgrm && window.instgrm.Embeds && typeof window.instgrm.Embeds.process === "function" ) { window.instgrm.Embeds.process(); } }; document.body.appendChild(s); } function setupRedgifsEmbed(urlObj, container) { // Extract ID from path: /watch/{id}, /ifr/{id}, etc. var parts = urlObj.pathname.split("/").filter(Boolean); var id = parts[parts.length - 1] || ""; if (!id) { showEmbedFailureDatanrGgY("redgifs"); return; } container.classList.remove("has-message"); var iframeSrc = "https://www.redgifs.com/ifr/" + encodeURIComponent(id); var watchUrl = "https://www.redgifs.com/watch/" + encodeURIComponent(id); container.innerHTML = ""; container.classList.add("redgifs-wrapper"); var iframe = document.createElement("iframe"); iframe.src = iframeSrc; iframe.setAttribute("frameborder", "0"); iframe.setAttribute("scrolling", "no"); iframe.setAttribute("allowfullscreen", ""); iframe.className = "redgifs-media"; // IMPORTANT: don't set a fixed width attribute (was 1080) // iframe.width = "1080"; container.appendChild(iframe); var p = document.createElement("p"); var a = document.createElement("a"); a.href = watchUrl; a.target = "_blank"; a.rel = "noopener noreferrer"; a.textContent = "via RedGIFs"; p.appendChild(a); container.appendChild(p); } })();

Social Media Embed

About

Preview

Trending Posts with this component