hexo-oembed
Embed oEmbed item on your Hexo article.
Features
- Supports oEmbed Discovery
- You can embed an oEmbed Discovery compatible site
- You can check a permalink with oEmbed Tester
- Vimeo, SlideShare, Speaker Deck, CodePen, TED, pixiv and more!
- Supports oEmded endpoint configuration
- You can embed an oEmbed compatible site(not support oEmbed Discovery) if you configure endpoint settings
- You can find an oEmbed endpoint at oEmbed site
- Twitter, Instagram, Gyazo, Flickr and more!
- Automatic Embed.ly fallback when an API key is provided
Installation
npm install hexo-oembed --save
Usage
{% oembed permlink [maxwidth] [maxheight] %}
Demo
See Demo page.
Configuration
className
You can provide a base CSS class name of this embeded HTML.
(Default: oembed
)
endpoints
You can provide endpoints of oEmbed provider. (Default: None)
You can get oEmbed provider endpoint from below link.
You can define match
and url
of a oEmbed endpoint and url
of that endpoint will be used if a hostname of permlink
contains the match
value.
Fallback by oEmbed Discovery if a permlink
page provide a oEmbed discovery link when a suitable endpoint is not found in the endpoints
.
For example youtube is compatible with oEmbed Discovery, so you do not need to define endpoint.
embedlyKey
Fallback Embed.ly if embedlyKey
is provided.
The Embed.ly service can deliver oEmbed information even for resources that don't provide oEmbed links. Go sign up with them and configure your API key.
Example
_config.yml:
oembed:
className: oembed
embedlyKey:
endpoints:
youtube:
match: youtube
url: https://www.youtube.com/oembed
gyazo:
match: gyazo
url: https://api.gyazo.com/api/oembed/
flickr:
match: flickr
url: http://www.flickr.com/services/oembed/
twitter:
match: twitter
url: https://publish.twitter.com/oembed
Thanks
This plugin refers to the following three OSS resources:
- https://github.com/astro/node-oembed
- https://github.com/monsier-oui/hexo-tag-oembed
- https://github.com/minamo173/hexo-tag-link-preview
Thanks to them.
License
MIT