// 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/shorts/HQmxg7HBJt4';

"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%; } /* 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(msg) { container.textContent = msg; } if (!rawUrl) { showMessage("This platform is not supported."); return; } // ---------- Detect provider ---------- var url; try { url = new URL(rawUrl); } catch (e) { showMessage("This platform is not supported."); 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("This platform is not supported."); 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) { showMessage("This platform is not supported."); return; } fetch(oembedUrl).then(function (r) { return r.json(); }).then(function (data) { if (!data || !data.html) { showMessage("This platform is not supported."); return; } 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 () { showMessage("This platform is not supported."); }); // ========= 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 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) { 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) { showMessage("This platform is not supported."); return; } 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); } })();

Pretty sure the human spine wasn't designed for this

Share

Comments

Related Posts