Hexo博客插入Bilibili视频
Hexo博客插入Bilibili视频

Hexo博客插入Bilibili视频

作为一个喜欢分享的博主,最近逛B站的时候,看到喜欢的Bilibili视频就想分享到个人博客,但是无奈Bilibili提供的分享方法虽然有两种,如下图:

image-20220408221755302

  • 第一种:视频地址 https://www.bilibili.com/video/BV1c4411x7Jq?share_source=copy_webweb结尾导致markdown语法不支持,pass!

  • 第二种:嵌入代码

    虽然支持播放,但是不支持自适应,字里行间看起来非常难看,显得格格不入,因此我们需要对该嵌入代码进行修改。效果如下:

我们需要用css代码实现自适应,代码存放位置以fexo主题为例,博客根目录/source/css/personal-style.css,如果没有,请自己建立相关文件夹及文件。

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

.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;}
}

建立完成相关文件夹及文件后,我们需要在主题配置文件,启用css.

image-20220408223006341

要想实现自适应需要引用.bilibili样式,需要对嵌入文件进行修改:

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

效果如下:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注