hexo博客网页嵌入bilibili视频(免插件)

此方法免插件。实测其效果还好于使用插件。

回到主题。

首先复制用于分享的嵌入代码
Bilibili分享截图

1
<iframe src="//player.bilibili.com/player.html?aid=73183667&bvid=BV1eE411y7G9&cid=125341177&page=16" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

理论上粘贴到md格式文章中即可。

但直接使用不兼容:

最佳方案

我现在使用的方案,即下方自适应(PC 移动兼容),用的bvid,把代码中bvid=BV这里修改即可。可以先上传B站视频,无需等待审核完成,打开视频从视频链接中获取bvid(此时网页提示等待审核,但是可从网址获取bvid),就可以添加代码到你的网页了。只是审核后才能观看视频。bilibili具体视频可通过bvid,aid等指定,这里使用bvid的原因是无需等待审核完成即可获取

直接将框内代码放入.md文件即可:

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

调整视频大小(过程)

自适应(PC 移动兼容)

大家可以注意到,下面指定bilibili具体视频时,同时通过bvid,aid,cid指定,上方我现在使用的方案仅使用了bvid

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

PC最佳方案

仅PC适用,部分移动设备不兼容

添加代码

1
style="width: 100%; height: 500px; max-width: 100%;align:center; padding:20px 0;"

为:

1
<iframe src="//player.bilibili.com/player.html?aid=73183667&bvid=BV1eE411y7G9&cid=125341177&page=16" style="width: 100%; height: 500px; max-width: 100%;align:center; padding:20px 0;" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

自定义

1
<iframe src="//player.bilibili.com/player.html?aid=73183667&bvid=BV1eE411y7G9&cid=125341177&page=16" width="600" height="400" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

参考链接

https://jasonssun.github.io/2019/06/17/Hexo搭建博客NexT主题之嵌入哔哩哔哩视频详细配置/

https://liuzhihang.com/2019/09/14/hexo-inserts-bilibili-video.html

(您还可以在归档页搜索文章标题)