22 / 02 / 17

在Hexo博客中插入哔哩哔哩视频

博客的图片可以使用图床，例如SM.MS，CloudFlare等。

SM.MS的付费图床速度还是杠杠的，使用了日本和 Premium Global CDN。

那么博客中的视频应该放哪儿呢，答案是哔哩哔哩和YouTube。它们都是理想的视频床。考虑到防火墙原因，推荐使用哔哩哔哩。

由于markdown中是可以直接插入html代码的，因此可以直接复制哔哩哔哩视频的html代码粘贴到博客中。

image.png


但默认参数无法实现视频长宽自适应。
因此，需要修改参数。
以下是屏幕自适应所需要设置的参数，自己跟着改就行：

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=82937960&bvid=BV1KJ411p7WN&cid=141890422&page=1"  scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

具体效果如下：

参考文献：

  1. Hexo中插入Bilibili视频。
Powered by Gridea