作为一个喜欢分享的博主,最近逛B站的时候,看到喜欢的Bilibili
视频就想分享到个人博客,但是无奈Bilibili
提供的分享方法虽然有两种,如下图:
-
第一种:视频地址
https://www.bilibili.com/video/BV1c4411x7Jq?share_source=copy_web
以web
结尾导致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
.
要想实现自适应需要引用.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>
效果如下: