@social-embed/wc

<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