A media tag for Hexo 3.x

Usage no npm install needed!

<script type="module">
  import hexoTagOwlplus from 'https://cdn.skypack.dev/hexo-tag-owlplus';



This project is based on hexo-tag-owl. Different than owl, this project replace <embed> with <iframe>.

Original auther: m80126colin

NPM version License


embed to iframe

  • Bilibili
  • Tudou
  • Tencent
  • Youku

An useful media tag for Hexo 3.x, Demo page



Run the following command in the root directory of hexo:

npm install hexo-tag-owlplus --save


Component Concept

All components are wrapped by a <div> tag with several classes. All components have at least one class .owlplus-media:

<div class="owlplus-media">[component]</div>

Auto Stylesheet Embedding

Because the components are lack of CSS, everyone can add some CSS for one's preference. Here provide a default CSS written in stylus at lib/asset/css.styl.

  css: default
  file: owlplus.css
  • css: whether insert default stylesheet or not, with following values
    • default: use default stylesheet at lib/asset/css.styl
    • custom: use custom stylesheet with path at file
    • none: unable this feature
    • default values: none
  • file: assign the path of stylesheet when css is not none, and default value is owlplus.css


Every components of this category have additional class .owlplus-video.

<div class="owlplus-media owlplus-video">[component]</div>

Each videos source will add additional class .owlplus-[source]:

  • Youtube: .owlplus-youtube
  • Niconico: .owlplus-niconico
  • Bilibili: .owlplus-bilibili
  • Vimeo: .owlplus-vimeo
  • Tudou: .owlplus-tudou
  • Youku: .owlplus-youku
  • Tencent: .owlplus-tencent
  • TED: .owlplus-ted


{% owlplus youtube youtube_id %}
{% owlplus niconico niconico_id [type] %}
{% owlplus bilibili bilibili_id [page] %}
{% owlplus vimeo vimeo_id %}
{% owlplus tudou tudou_id %}
{% owlplus youku youku_id %}
{% owlplus tencent tencent_id %}
{% owlplus ted ted_id [lang] %}
  • youtube_id - video id on Youtube
  • vimeo_id - video id in Vimeo.
  • Niconico
    • niconico_id - video id in Niconico.
    • type - embeded type. There are only thumb and watch two options. Default is set as thumb.
      • thumb: set nico in thumb mode with extra class .niconico-thumb
      • watch: set nico in watch mode with extra class .niconico-watch
  • Bilibili
    • bilibili_id - video id in Bilibili. You can use either av247371 or 247371.
    • page - if video have several clips, you can add a number indicated the video.
  • tudou_id - video id in Tudou.
  • youku_id - video id in Youku. You can use either id_XMTc3MzcxMjQw or XMTc3MzcxMjQw.
  • tencent_id - video id in Tencent Video.
  • TED
    • ted_id - video id in TED.
    • lang - subtitle language for TED videos.


{% owlplus youtube YtuAOT_c2EA %}
{% owlplus niconico sm1494658 %}
{% owlplus niconico sm1494658 watch %}
{% owlplus bilibili av247371 %}
{% owlplus bilibili 247371 %}
{% owlplus bilibili av367901 2 %}
{% owlplus vimeo 5566538 %}
{% owlplus tudou pRsx83aRLLs %}
{% owlplus youku id_XMTc3MzcxMjQw %}
{% owlplus tencent o03134mlm8j %}
{% owlplus ted gero_miesenboeck zh-cn %}


Every components of this category have additional class .owlplus-image.

<div class="owlplus-media owlplus-image">[component]</div>

Local Images

Insert your image from blog's path.


{% owlplus local image_path %}
  • image_path - relative path from your blog.


{% owlplus local img/img.jpg %}
{% owlplus local another-img.gif %}


Insert your gif from Giphy.


{% owlplus giphy giphy_id %}
  • giphy_id - giphy id


{% owlplus giphy AxqJJOBkWHXW %}


  • Tao Wang: Tencent (騰訊視頻) plugin function
  • Riff: TED videos plugin support