Typecho文章内挂载B站视频操作指南

2023 年 01 月 19 日

224 次浏览

1232字数

原理网上其实一堆，我这里就不阐述太多了。我这里只记录一下本站的操作。

一、搞定CSS自定义样式。
由于本站是免费的模板，所以不支持自定义样式。当然可以选择手动修改源码，不过我更愿意选择插件来搞定。
本站使用的插件是：CustomCssAndJs
下载地址：https://github.com/kyuuseiryuu/typecho-plugin-custom-css-js

二、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站视频插入 class="iframe_video"

例如：

原始B站转载代码

<iframe src='//player.bilibili.com/player.html?bvid=BV12S4y1t7ph&cid=787381399&page=1&share_source=copy_web' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen='true'></iframe>

修改后代码

<iframe class="iframe_video" src='//player.bilibili.com/player.html?bvid=BV12S4y1t7ph&cid=787381399&page=1&share_source=copy_web' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen='true'></iframe>

至此本文就算结束了，具体实际效果演示：https://niuc.org/archives/16.html