@social-embed: Embedding media players have never been so easy

▶️ Web component: Drop-in. Native players.

<o-embed /> Web component:

Live Editor

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

Result

Try it live: codepen.io, jsfiddle

⚙️ Library only: Detect and parse embeddable URLs

@social-embed/lib is a repository of embed friendly sites and typed library for scraping IDs and converting IDs into an embed-friendly format.

import {
  getProviderFromUrl,
  ProviderIdFunctionMap,
  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'
)
// YouTube
const getId = ProviderIdFunctionMap[provider]
getId("https://youtu.be/watch?v=Bd8_vO5zrjo")
// "Bd8_vO5zrjo"

Try it now: codepen.io (console), jsfiddle