实现文章内挂载BiliBili视频代码

寻梦xunm| 398| 收集

2年前

超过782天温馨提示

本文最后更新于2022年11月27日，已超过782天没有更新，若内容或图片失效，请留言反馈。

因为有时候想要分享一些B站的视频在文章内。考虑到视频的大小，不适合直接放在本地。而且Typecho自带的视频不是很友好,不支持云解析，于是我在网上找到了一种解决方案，分享出来供大家参考。

教程
先打开bilibili中想要分享的视频，然后点击分享找到嵌入代码

<iframe src="//player.bilibili.com/player.html?aid=1610216&bvid=BV1Ex411P7Bx&cid=2447953&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

然后把复制的嵌入代码直接添加到文章中。
并给iframe 这个标签头部添加一个 class="iframe_video" 的属性

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

最后给主题添加自定义样式:
将以下代码添加到主题的自定义CSS里(Handsome主题在:控制台--外观--设置外观--开发者设置--自定义CSS,复制到框中即可,其他主题找到合适的位置放置)

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

另外，B站默认视频质量是最低的，但是可以通过在src链接后面添加&high_quality=1来设置清晰度。

文章来源于:https://www.hellolin.cn/archives/328/

教程代码哔哩哔哩分享视频

0 赞 or 打赏

喜欢就打赏一点