leonceaklin/oembed-component

📋oEmbed web component that make you easy to embed everything.

oEmbed component

oEmbed web component that make you easy to embed everything.

<o-embed> is a component which makes it easy to display any embed that supports oEmbed.

Supported Providers

How to install

Add the following script tag to the HTML-head

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

or install with Yarn/NPM

yarn add oembed-component

npm install 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 Supported providers
proxy	String	""	false	URL of proxy

Proxy

Some of the providers do not allow cross-origin HTTP requests and <o-embed> will not work with those sites without a proxy defined in the proxy property. I would suggest to use cors-anywhere.herokuapp.com as your proxy. A self-hosted version is available at https://github.com/Rob--W/cors-anywhere/.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	11+	Latest ✔

Based on vue.js?

Yes. This component uses vue.js and vue-custom-element for development. However you don't need to add vue.js to your project because everything is 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

You can find the next steps of the project in our issues ;) Want to contribute? PR please.

License

MIT License © thangman22

See my another project at thangman22.com