<o-embed>

<o-embed> is Web Components for oEmbed generated by open-wc.

oEmbed

oEmbed means the following.

oEmbed is a format for allowing an embedded representation of a URL on third party sites.

For example, in the case of Tweet, you will see the following embed.

The URL for the Tweet is bellow.

• https://twitter.com/openwc/status/1427617679427440643

The URL for Tweet's oEmbed API is bellow.

• https://publish.twitter.com/oembed? url=https://twitter.com/openwc/status/1427617679427440643

Usage

<script type="module">
  import { OEmbed } from 'https://cdn.skypack.dev/@silverbirder/o-embed';

  window.customElements.define("o-embed", OEmbed);
</script>

<o-embed
  src="https://twitter.com/openwc/status/1427617679427440643"
  proxy="https://silverbirder-cors-anywhere.herokuapp.com"
></o-embed>

Attributes

|Attribute|Type|Required|Default|Description| |--|--|--|--|--| |src|String|true|""|URL to embed.It must be supported by the provider.| |proxy|String|true|""|URL of proxy.The details is here(Proxy).| |height|String|false|""|height of iframe| |weight|String|false|""|weight of iframe| |provider|String|false|"https://oembed.com/providers.json"|URL of providers|

Proxy

Some of provider is not allow cross-origin HTTP request and oembed will not work with those site. You need to put proxy url to make it work. I would suggest to use cors-anywhere.herokuapp.com as your proxy. Self hosted version is provide at https://github.com/Rob--W/cors-anywhere/.

※ https://www.webcomponents.org/element/thangman22/oembed-component

Slot

<o-embed>
  <p slot="loading">Loading...</p>
  <p slot="notFound">Not Found</p>
  <p slot="error">Error</p>
</o-embed>

|Slot|Condition| |--|--| |loading|While loading src| |notFound|Provider of src does not exist| |error|When unknown errors occur|

Installation

npm i @silverbirder/o-embed