Oembed component

oEmbed web component that make you easy to embed everything.

<o-embed> is component to help developer put any embed that support oEmbed to website easier.

Provider supported

How to install

Add script tag at head

<script defer async src="https://cdn.jsdelivr.net/npm/oembed-component/dist/oEmbed.js"></script>

or install with Yarn

yarn add oembed-component

How to use

<o-embed url="https://www.instagram.com/p/BfcNH1XD91P/"></o-embed>

Properties

Property | Type | Default | Require | Description :--- |:--- |:--- |:--- |:--- url | String | "" | true | URL of object Provider supported proxy | String | "" | false | URL of proxy

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

Browser Support

| | | | | | :---: | :---: | :---: | :---: | :---: | :---: | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔

Based on vue.js?

Yes. This component use vue.js and vue-custom-element for development. However You not need to add vue.js to your project because is all packed in dist.js

Development

yarn # Install dependencies
yarn dev # Start the development
yarn test # Run unit test
yarn build # Run build for make bundle

Development

yarn # Install dependencies
yarn dev # Start the development
yarn test # Run unit test
yarn build # Run build for make bundle

Contributing

Find on our issues the next steps of the project ;) Want to contribute? PR please.

License

MIT License © thangman22

See my another project at thangman22.com