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

• CodeSandbox
• JSFiddle

Examples

• YouTube
• Spotify
• Vimeo
• DailyMotion

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 MediaEmbed module (see issue ckeditor#2737)

• Also common is detecting if a URL is embeddable or not, in that case see @social-embed/lib See 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:
  • angular component from ckeditor#2737
• <o-embed> components:
  • https://github.com/thangman22/oembed-component

Try it live

<o-embed> can handle simple embeds with open embedding, such as YouTube, DailyMotion, Vimeo, and Spotify.

Live Editor

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

Result

Loading...

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 &lt;o-embed&gt;</h2>
    <o-embed .url=${url}></o-embed>
  `,
  document.body,
);

This is an <o-embed>