Overview
<o-embed> · 
Web component for URLs of embed-friendly sites such YouTube, Spotify, Vimeo, and so on.
-
Works any you can use HTML.
Web components are a browser friendly.
-
No server or service required
URL patterns and ID extraction handled by a separate client-based, browser-friendly package -
@social-embed/lib- which can even be used independently.
Demo
Examples
Usecases
-
Dynamic content backends
- users enter a media URL, such as a YouTube link
- HTML content where embeds are saved
-
HTML Editors This package was originally created for CKEditor's
MediaEmbedmodule (see issue ckeditor#2737) -
Also common is detecting if a URL is embeddable or not, in that case see
@social-embed/libSee StackOverflow, Regex websites detecting embed URLs(google search: youtube regex site:stackoverflow.com)
Tech
Built in LitElement w/ lit-html + TypeScript. View the source on GitHub.
Compare to thangman22/oembed-component.
Setup
Install dependencies:
npm i @social-embed/wc
yarn add @social-embed/wc
Usage
<o-embed url="https://www.youtube.com/watch?v=G_QhTdzWBJk"></o-embed>
Similar tools
- embed.ly and iframely - invoked as script. finds / replaces urls with rich context
- plyr - component. customizable frontend for video players, intakes URLs
<oembed>components:<o-embed>components:
Try it live
<o-embed> can handle simple embeds with open embedding, such as YouTube, DailyMotion,
Vimeo, and Spotify.
<o-embed url="https://www.youtube.com/watch?v=Bd8_vO5zrjo"></o-embed>
Declarative rendering
<o-embed> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
import { html, render } from "lit-html";
const url = "https://www.youtube.com/watch?v=XLOCQw5s9Uw";
render(
html`
<h2>This is an <o-embed></h2>
<o-embed .url=${url}></o-embed>
`,
document.body,
);