Overview

<o-embed> ·

A Web Component that transforms URLs from various media platforms (YouTube, Spotify, Vimeo, etc.) into embeddable frames. Because it’s a standard browser component, <o-embed> works in any HTML environment without requiring a custom server or third-party API.

Highlights

• Browser-friendly. Built on modern Web Components.
• No extra services. Client-side parsing from @social-embed/lib.
• Drop-in usage. Insert <o-embed> in your HTML, or load it via ES modules.

Just want the parsing logic without the web component? See @social-embed/lib.

Demo

• CodeSandbox
• JSFiddle

Example Embeds

• YouTube
• Spotify
• Vimeo
• DailyMotion

---

Use Cases

• Dynamic content backends where users enter a media URL (e.g., YouTube links).
• WYSIWYG or HTML editors such as CKEditor with its MediaEmbed module (ckeditor#2737).
• Embed detection: checking if a URL is embeddable. If you only need to detect and parse, consider using @social-embed/lib directly.

Tech Stack

• Lit – used for building components.
• lit-html – templating.
• TypeScript – typed development.

Setup

Below are typical installation commands for each package manager.

NPM:

npm i @social-embed/wc

Yarn:

yarn add @social-embed/wc

pnpm:

pnpm add @social-embed/wc

Usage

Include the component and place an <o-embed> element in your HTML. For example:

<script type="module" src="https://unpkg.com/@social-embed/wc?module"></script>

<o-embed url="https://www.youtube.com/watch?v=G_QhTdzWBJk"></o-embed>

Alternatively, import it into your JavaScript or TypeScript file:

import "https://unpkg.com/@social-embed/wc?module";

document.body.innerHTML = `
  <o-embed url="https://youtu.be/Bd8_vO5zrjo" allowfullscreen></o-embed>
`;

---

Similar Tools

• embed.ly / iframely – scripts that find and replace URLs in the DOM.
• plyr – a customizable video/audio player that can accept URLs.
• <oembed> components – e.g., Angular OEmbed component.
• <o-embed> components – e.g., thangman22/oembed-component.

---