https://github.com/silverbirder/o-embed

<o-embed> is Web Components for oEmbed generated by open-wc
https://github.com/silverbirder/o-embed

javascript oembed open-wc storybook webcomponents

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/silverbirder/o-embed
• Owner: silverbirder
• License: mit
• Created: 2022-03-06T05:36:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-10T23:08:37.000Z (3 months ago)
• Last Synced: 2025-03-11T00:20:22.016Z (3 months ago)
• Topics: javascript, oembed, open-wc, storybook, webcomponents
• Language: TypeScript
• Homepage:
• Size: 345 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Silver-birder/o-embed)

[![codecov](https://codecov.io/gh/Silver-birder/o-embed/branch/main/graph/badge.svg?token=52D9NYB4TO)](https://codecov.io/gh/Silver-birder/o-embed)

[![storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg)](https://www.chromatic.com/library?appId=6235dbeee943ba003aa9a965)

# \

`` is Web Components for [oEmbed](https://oembed.com/) generated by [open-wc](https://open-wc.org/).

## 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.

![open wc tweet](https://res.cloudinary.com/silverbirder/image/upload/h_512/v1647767845/github.com/o-embed/open-wc-tweet.png)

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

```html

  import { OEmbed } from 'https://cdn.skypack.dev/@silverbirder/o-embed';

  window.customElements.define("o-embed", OEmbed);

```

### 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)](#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

```html

  
Loading...

  
Not Found

  
Error


```

|Slot|Condition|

|--|--|

|loading|While loading `src`|

|notFound|Provider of `src` does not exist|

|error|When unknown errors occur|

## Installation

```bash

npm i @silverbirder/o-embed

```