hexo插入视频代码块及音频

hexo插件安装插入视频代码块及音频

1.hexo插件安装

使用 Hexo 插件插入音乐/视频
两个好用的hexo插件：

**hexo-tag-aplayer：https://github.com/grzhan/hexo-tag-aplayer)

**hexo-tag-dplayer： https://github.com/NextMoe/hexo-tag-dplayer

1.1 播放音乐的aplayer

在cmd页面内，使用npm安装：

npm install hexo-tag-aplayer

1.2 播放视频的dplayer

在cmd页面内，使用npm安装：
npm install hexo-tag-dplayer

hexo插入网易云音乐

1.提取音乐的代码块

1. 进入网易云音乐搜索你想要的音乐。（以“下雨天”为例）。
2. 检索后进入下雨天页面，点击分享。
3. 复制该处代码

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=86 src="//music.163.com/outchain/player?type=2&id=368764&auto=1&height=66"></iframe>

直接将其放在你的markdown文件中，即可显示音乐，如下所示：

hexo插入bilibili视频代码块

1.提取视频的代码块

1. 进入bilibili搜索你想要的视频。（以“回形针PaperClip你的 App 为什么知道你想买什么？”为例）。
2. 检索后进入回形针PaperClip你的 App 为什么知道你想买什么页面，点击分享。
3. 复制代码块处代码

<iframe src="//player.bilibili.com/player.html?aid=40891962&bvid=BV17t411p7gx&cid=71826908&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接将其放在你的markdown文件中，即可显示b站视频，但是会发现视频比较小，如下所示：

2.代码块前后修饰

在改代码的前后基础上加上

<div style="position:relative; padding-bottom:75%; width:100%; height:0">

 style="position:absolute; height: 100%; width: 100%;"

</div>

即可将你的视频直接贴在你的文章上。

参考：

如何在Hugo/Hexo博客中插入响应式Bilibili视频代码块
Hexo博客中插入音乐/视频/