Hexo博客Markdown文件中插入B站视频

发布日期: 2024-06-27

问题：在不用插件的情况下，用B站官方的`嵌入代码`方式引入视频，视频屏幕很小

b站嵌入代码

如下：

解决办法

办法1、修改width和height

<iframe width=200 height=200 class="bilibili" src="//player.bilibili.com/player.html?aid=212464091&bvid=BV1xa411t7JK&cid=553318499&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

通过修改width和height来调整视频大小，但是换成不同的设备无法正常显示.

办法2、添加css自定义代码

使用@media属性，对不同屏幕大小的设备，设置宽度和高度
@media可以查询到设备属性, 比如：屏幕高度、设备方向（如移动设备横屏）、可视窗口的宽高、屏幕解析度等

修改方法：

以matery主题为例，找到主题文件夹下的/hexo-theme-matery/source/css/my.css文件，在文件中添加如下代码：

/* Here is your custom css styles. */

/*哔哩哔哩视频适配*/

.bilibili {
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .bilibili {height: 15em;max-width: 25em;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bilibili {height: 20em;max-width: 30em;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bilibili {height: 30em;max-width: 40em;}
}
@media only screen and (min-width: 1200px) {
    .bilibili {height: 40em;max-width: 50em;}
}

在B站嵌入代码中添加class="bilibili"属性，如下：

<iframe class="bilibili" src="//player.bilibili.com/player.html?aid=212464091&bvid=BV1xa411t7JK&cid=553318499&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>