Overview

<o-embed> Web Component

Transform media URLs into beautiful embeds with a single HTML tag.

A Web Component that turns URLs from popular media platforms (YouTube, Spotify, Vimeo, etc.) into fully functional embedded players. Just add a single tag to your HTML:

<!-- Before: Raw link your users can't interact with -->
https://www.youtube.com/watch?v=G_QhTdzWBJk

<!-- After: Interactive embedded player -->
<o-embed url="https://www.youtube.com/watch?v=G_QhTdzWBJk"></o-embed>

Demo & Examples

See it in action:

Live Examples by Platform

Key Features

Zero configuration - Just drop in the tag with a URL
No server - Everything processes in the browser
Framework-agnostic - Works with any web technology
Standards-based - Uses native Web Components
Responsive - Adapts to container width
Lightweight - Minimal impact on page load
Automatic platform detection - Supports multiple content providers

Quick Start

1. Install

NPM:

npm i @social-embed/wc

Yarn:

yarn add @social-embed/wc

PNPM:

pnpm add @social-embed/wc

2. Add to your project

Option A: Via Script Tag

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

Option B: Via Import

// In your JavaScript/TypeScript file
import "@social-embed/wc";

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

Supported Media Platforms

Platform	Example URL
YouTube	youtube.com/watch?v=ID, youtu.be/ID
Spotify	open.spotify.com/track/ID, spotify:album:ID
Vimeo	vimeo.com/ID, vimeo.com/channels/name/ID
DailyMotion	dailymotion.com/video/ID
Loom	loom.com/share/ID
EdPuzzle	edpuzzle.com/media/ID
Wistia	support.wistia.com/medias/ID

Common Use Cases

CMS Systems - Enable media embeds in user-generated content
Markdown/WYSIWYG Editors - Automatically transform URLs into embeds
Blogs & Documentation - Easily add media examples
Social Platforms - Turn shared links into rich interactive content
Educational Sites - Embed instructional videos with minimal effort

Advanced Usage

Attributes

<!-- Set custom dimensions -->
<o-embed url="https://youtu.be/Bd8_vO5zrjo" width="640" height="360"></o-embed>

<!-- Enable fullscreen button -->
<o-embed url="https://youtu.be/Bd8_vO5zrjo" allowfullscreen></o-embed>

<!-- Add loading spinner with message -->
<o-embed url="https://youtu.be/Bd8_vO5zrjo" loading="Loading video..."></o-embed>

Error Handling

<!-- Custom error message -->
<o-embed url="invalid-url" error-message="Sorry, this URL isn't supported"></o-embed>

Technical Details

Built with:

Lit - Lightweight web component framework
TypeScript - Type-safe JavaScript
@social-embed/lib - URL parsing engine

Alternative Solutions

embed.ly / iframely - Commercial embed services
plyr - Custom video/audio player
Other web components - Angular, thangman22

Want just the URL parsing without the component? Check out @social-embed/lib.

License

MIT