Open sourcenpm package

Embed cards from a single URL

Pass a URL to EmbedCard and get YouTube, X, Reddit, Google Maps, Vimeo, and more, with a sensible fallback when nothing matches.

pnpm add embed-card

Documentation Playground

import { EmbedCard } from "embed-card"export function Example() {  return (    <EmbedCard      url={"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}    />  )}

Built for product pages and docs

One mental model for previews: paste a link, render a card, ship. Explore how it maps to your stack below.

One URL, one component

Drop in EmbedCard with a string URL—no host-specific wrappers or iframe boilerplate.

Get started

Many platforms

YouTube, X, Instagram, Reddit, Maps, Vimeo, and more—see which URLs map to which embed.

Supported platforms

Multiple render paths

Use React, a custom element, or manual rendering from the same package API surface.

React guide

Guides

Each tile is a live EmbedCard for a real URL—hover to straighten the preview, then open the matching platform doc for URL rules and theming.

YouTube

Watch URLs and shorts resolve to a responsive YouTube iframe embed.

X

Status URLs load the official Tweet embed with theme-aware chrome.

Instagram

Permalinks for posts, reels, and TV resolve to Instagram’s embed iframe.

Thread URLs fetch the public JSON API for an in-card thread preview.

Google Maps

Maps links gain output=embed for an iframe map inside the card.

Vimeo

Standard Vimeo URLs resolve to the Vimeo player iframe.

TikTok

Video permalinks use TikTok’s embed iframe; vm.tiktok.com links resolve via oEmbed in the browser.

Platforms

Built-in providers cover the hosts below. Read match rules, caveats, and theming on Supported platforms, or jump straight into the playground to paste any sample.

YouTube X / Twitter Instagram Reddit Google Maps Vimeo TikTok Link preview Invalid URL

Quick links

Docs, playground, and the full table of contents in one place.