// 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 () { (function injectCSS() { var css = ` .datanrGgY-embed { border-radius:20px; width:100%; margin:0 !important; padding:0; box-sizing:border-box; min-width:0; overflow-x:hidden; } .datanrGgY-embed * { box-sizing:border-box; max-width:100%; } .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; aspect-ratio:auto; height:auto; max-height:none; width:100%; max-width:none; overflow:visible; } .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 */ .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 */ .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 .datanrGgY-x-frame { display:block !important; flex:0 0 auto !important; width:550px !important; max-width:100% !important; min-height:50px; margin:0 !important; border:0 !important; overflow:hidden; } /* TikTok */ .datanrGgY-embed.tiktok-wrapper { border-radius:0; width:100%; } .datanrGgY-tiktok-inner { width:var(--datanrGgY-tiktok-width, 325px); max-width:100%; margin:0 !important; } .datanrGgY-tiktok-inner .tiktok-embed { width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 !important; } .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 */ .datanrGgY-embed:not(.tiktok-wrapper):not(.x-wrapper) iframe { display:block; margin:0; width:100%; max-width:100%; border:0; } /* Constrained preview mode */ .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; } .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; } .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); })(); var rawUrl = ( window.datanrGgY && typeof window.datanrGgY.video === "string" ? window.datanrGgY.video : "" ).trim(); var scriptEl = document.currentScript; var container = document.createElement("div"); container.className = "datanrGgY-embed"; scriptEl.parentNode.insertBefore(container, scriptEl); applyMaxHeightConstraint(container); function showMessage(title, detail) { container.classList.remove( "youtube-wrapper", "youtube-shorts-wrapper", "instagram-wrapper", "x-wrapper", "tiktok-wrapper", "soundcloud-wrapper", "redgifs-wrapper" ); 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; } var url; try { url = new URL(rawUrl); } catch (error) { 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; } if (provider === "instagram") { container.classList.add("instagram-wrapper"); setupInstagramEmbed(rawUrl, container); return; } if (provider === "redgifs") { setupRedgifsEmbed(url, container); return; } /* * X is rendered directly without widgets.js or createTweet(). * The iframe src is assigned before the iframe is connected to the DOM. */ if (provider === "x") { container.classList.add("x-wrapper"); setupXEmbed(url, container); return; } var isYouTubeShortsDatanrGgY = provider === "youtube" && isYouTubeShortsUrlDatanrGgY(url); 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"); } 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 "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 (response) { if (!response.ok) { var error = new Error( provider + " oEmbed failed with status " + response.status ); error.status = response.status; throw error; } return response.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); } if (provider === "youtube") { var youtubeIframe = container.querySelector("iframe"); if (youtubeIframe) { youtubeIframe.removeAttribute("width"); youtubeIframe.removeAttribute("height"); youtubeIframe.style.width = "100%"; youtubeIframe.style.height = "100%"; youtubeIframe.style.display = "block"; } } }) .catch(function (error) { console.warn("datanrGgY embed failed:", error); showEmbedFailureDatanrGgY( provider, error && error.status ); }); function extractXPostIdDatanrGgY(urlObj) { var match = String(urlObj.pathname || "").match( /\/status(?:es)?\/(\d+)/i ); return match ? match[1] : ""; } function setupXEmbed(urlObj, targetContainer) { var tweetId = extractXPostIdDatanrGgY(urlObj); if (!tweetId) { showMessage( "Invalid X post URL", "Use a link containing /status/ followed by the post ID." ); return; } targetContainer.classList.remove("has-message"); targetContainer.innerHTML = ""; var embedId = "twitter-widget-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 8); /* * Keep the iframe detached while configuring it. In particular, src must * be assigned before appendChild(). */ var iframe = document.createElement("iframe"); iframe.id = embedId; iframe.className = "datanrGgY-x-frame"; iframe.title = "X post"; iframe.setAttribute("scrolling", "no"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", ""); iframe.setAttribute( "allow", "autoplay; encrypted-media; fullscreen; picture-in-picture" ); iframe.style.display = "block"; iframe.style.width = "550px"; iframe.style.maxWidth = "100%"; iframe.style.height = "50px"; iframe.style.border = "0"; iframe.style.margin = "0"; iframe.style.overflow = "hidden"; var embedUrl = new URL( "https://platform.twitter.com/embed/Tweet.html" ); embedUrl.searchParams.set("dnt", "true"); embedUrl.searchParams.set("embedId", embedId); embedUrl.searchParams.set("frame", "false"); embedUrl.searchParams.set("hideCard", "false"); embedUrl.searchParams.set("hideThread", "false"); embedUrl.searchParams.set("id", tweetId); embedUrl.searchParams.set( "lang", document.documentElement.lang || "en" ); embedUrl.searchParams.set("origin", window.location.href); embedUrl.searchParams.set("theme", "light"); embedUrl.searchParams.set("width", "550px"); function handleTwitterMessage(event) { if ( event.origin !== "https://platform.twitter.com" || event.source !== iframe.contentWindow ) { return; } var envelope = event.data && typeof event.data === "object" && event.data["twttr.embed"]; if ( !envelope || envelope.id !== embedId || typeof envelope.method !== "string" ) { return; } if (envelope.method === "twttr.private.resize") { var params = Array.isArray(envelope.params) && envelope.params.length ? envelope.params[0] : null; var height = Number(params && params.height); if ( Number.isFinite(height) && height >= 100 && height <= 5000 ) { iframe.style.height = Math.ceil(height) + "px"; } } if (envelope.method === "twttr.private.rendered") { iframe.setAttribute("data-rendered", "true"); } } function removeTwitterMessageListener() { window.removeEventListener( "message", handleTwitterMessage ); } window.addEventListener( "message", handleTwitterMessage ); window.addEventListener( "pagehide", removeTwitterMessageListener, { once:true } ); /* * This ordering is intentional. Do not move appendChild() above the src * assignment. */ iframe.src = embedUrl.toString(); targetContainer.appendChild(iframe); } function isYouTubeShortsUrlDatanrGgY(urlObj) { var youtubeHost = urlObj.hostname .replace(/^www\./, "") .toLowerCase(); if ( !( youtubeHost === "youtu.be" || youtubeHost.endsWith("youtube.com") ) ) { return false; } var parts = urlObj.pathname .split("/") .filter(Boolean); return parts[0] === "shorts" && !!parts[1]; } function showEmbedFailureDatanrGgY(providerName, status) { if ( providerName === "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 (providerName === "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(providerName); 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(providerName) { switch (providerName) { 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, targetContainer) { 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; targetContainer.style.setProperty( "--datanrGgY-tiktok-width", embedWidth + "px" ); var inner = document.createElement("div"); inner.className = "datanrGgY-tiktok-inner"; inner.innerHTML = data.html; targetContainer.innerHTML = ""; targetContainer.appendChild(inner); activateScripts(inner); } function applyMaxHeightConstraint(element) { var maxHeight = ""; var config = window.datanrGgY_config && typeof window.datanrGgY_config === "object" ? window.datanrGgY_config : null; if ( config && typeof config.maxHeight === "number" && config.maxHeight > 0 ) { maxHeight = config.maxHeight + "px"; } if (!maxHeight && document.body) { maxHeight = (document.body.dataset && document.body.dataset.maxHeight) || document.body.getAttribute("data-max-height") || ""; } maxHeight = String(maxHeight || "").trim(); if (!maxHeight) { element.classList.remove("is-max-constrained"); element.style.removeProperty("--datanrGgY-maxh"); return; } element.style.setProperty( "--datanrGgY-maxh", maxHeight ); element.classList.add("is-max-constrained"); } function activateScripts(root) { var scripts = root.querySelectorAll("script"); scripts.forEach(function (oldScript) { var script = document.createElement("script"); Array.prototype.forEach.call( oldScript.attributes, function (attribute) { script.setAttribute( attribute.name, attribute.value ); } ); if (oldScript.textContent) { script.textContent = oldScript.textContent; } oldScript.parentNode.replaceChild( script, oldScript ); }); } function setupInstagramEmbed( instagramUrl, targetContainer ) { targetContainer.classList.remove("has-message"); var cleanUrl = instagramUrl.split("?")[0]; targetContainer.innerHTML = '

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

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

Social Media Embed

About

Preview

Trending Posts with this component