social-embed

Embed YouTube, Spotify, DailyMotion, Vimeo, and more with one simple tag.

Getting started GitHub

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

Platforms You Can Embed

Start Embedding in Minutes

Choose your preferred approach: a ready-to-use Web Component or a flexible TypeScript library.

Web Component: Ready to Use

Add to your project:

npm install @social-embed/wc

yarn add @social-embed/wc

pnpm add @social-embed/wc

Connect the component:

import '@social-embed/wc';

Transform URLs into players:

<o-embed url="https://youtu.be/FTQbiNvZqaY" />

Library: Full Control

Add to your project:

npm install @social-embed/lib

yarn add @social-embed/lib

pnpm add @social-embed/lib

Import what you need:

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

Parse and transform media URLs:

// Get YouTube ID from URL
const videoId = getYouTubeIdFromUrl('https://youtu.be/FTQbiNvZqaY');

// Get provider and convert to embed URL
const provider = getProviderFromUrl('https://youtu.be/FTQbiNvZqaY');
const embedUrl = provider.getEmbedUrlFromId(videoId);

View Complete Guide