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

image-20220408221755302

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

  • 第二种：嵌入代码

    1
    <iframe 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>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*哔哩哔哩视频适配*/
 
.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样式，需要对嵌入文件进行修改：

1
<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>

效果如下：