Skip to main content

Overview

<o-embed> is a web component to automatically switch out tags with oEmbed-compatible social websites. You can it anywhere you can use HTML!

Under the hood, this embed doesn't use oEmbed directly, rather, it uses @social-embed/lib's repository of patterns and functions to fetch the ID and translate the URL into a compatible format.

The reason this works is providers like YouTube, Vimeo, and so on are inclined to keep embed formats stable (so existing embeds across the web don't break).

The component is built in LitElement w/ lit-html + TypeScript. View the source on GitHub.

Usecases#

Similar tools#

Try it live#

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

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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>