Skip to main content

Overview

<o-embed> · GitHub license npm version

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

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

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

This is an <o-embed>