方法一

参考教程hexo博客插入B站视频外链（raw实现）&（标签插件实现）

tips:文章页局部html代码不渲染，比如本md文章页中，B站视频不想经过Hexo渲染，则包一层raw标签。

直接在md文章中添加代码：

1
2
3
4
5
{% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=42467871&bvid=BV1Cb411677C&cid=74518805&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
></iframe></div>
{% endraw %}

示例

方法二

参考教程：Bilibili视频适配
在[BlogRoot]\source\css\custom.css自定义样式的文件中引入如下代码（可以自行微调）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*哔哩哔哩视频适配*/
/*https://www.fomal.cc/posts/5389e93f.html*/
.aspect-ratio {  
  position: relative;  
  width: 100%; /* 设置容器宽度为父元素宽度的100% */  
  padding-bottom: 56.25%; /* 保持16:9的宽高比（75%对于4:3，这里用56.25%对应16:9）*/  
  overflow: hidden; /* 隐藏超出容器的内容 */  
}  
  
.aspect-ratio iframe {  
  position: absolute;  
  top: 0; /* 将iframe的顶部与容器的顶部对齐 */  
  left: 0; /* 将iframe的左边与容器的左边对齐 */  
  width: 100%; /* 使iframe宽度与容器宽度相同 */  
  height: 100%; /* 使iframe高度与容器高度相同 */  
}

直接复制插入md文章就行，修改里面的aid为你视频的BV号：

1
2
3
4
5
6
7
8
9
<div class="aspect-ratio">  
    <iframe ssrc="https://player.bilibili.com/player.html?aid=789618187&&page=1&as_wide=1&high_quality=1&danmaku=0"   
            scrolling="no"   
            border="0"   
            frameborder="0"   
            framespacing="0"   
            allowfullscreen="true">  
    </iframe>  
</div>

示例