social-embed

Web Component

Use the <o-embed> custom element anywhere HTML is supported. No extra services or servers required.

The custom element in @social-embed/wc:

• Works seamlessly with popular editors and frameworks.
• Instantly transforms YouTube, Vimeo, Spotify, and more into embeds.
• Easy to set up: just import the script and place <o-embed>.

Try it live:

Playground (Demos / Examples): CodePen · JSFiddle

Get started

URL Tools (Library)

Prefer to handle IDs and embed URLs directly?

@social-embed/lib is a TypeScript library for:

• Extracting IDs from any recognized provider URL (YouTube, DailyMotion, Loom, and more).
• Converting those IDs into embeddable formats.
• Normalizing or validating incoming URLs.

import {
  getProviderFromUrl,
  getYouTubeIdFromUrl,
  youTubeUrlRegex,
} from "@social-embed/lib";

"https://youtu.be/watch?v=Bd8_vO5zrjo".match(
  youTubeUrlRegex
);
// => [
//   "https://youtu.be/watch?v=Bd8_vO5zrjo","Bd8_vO5zrjo"
// ]

getYouTubeIdFromUrl(
  "https://youtu.be/watch?v=Bd8_vO5zrjo"
);
// => "Bd8_vO5zrjo"

const provider = getProviderFromUrl(
  "https://youtu.be/watch?v=Bd8_vO5zrjo"
);
// => {
//   name: "YouTube",
//   canParseUrl: [Function],
//   getIdFromUrl: [Function],
//   getEmbedUrlFromId: [Function]
// }

provider.getIdFromUrl(
  "https://youtu.be/watch?v=Bd8_vO5zrjo"
);
// => "Bd8_vO5zrjo"

provider.getEmbedUrlFromId("Bd8_vO5zrjo");
// => "https://www.youtube.com/embed/Bd8_vO5zrjo"

Playground (Demos / Examples): CodePen (console) · JSFiddle

Get started