@social-embed/wc NPM

`<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

Example Embeds

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>
`;