WordPress插入哔哩哔哩(B站)视频自适应样式代码

用过哔哩哔哩的朋友都知道,这个平台视频种类多,最重要的还没有广告,在自己的网站文章中插入B站视频无疑是很不错的选择了。
但是呢,直接复制B站的代码粘贴的话,手机端还可以,电脑会很小,对用户不是很友好,像这样:

WordPress插入哔哩哔哩(B站)视频自适应样式代码
是不是不太好?
站长带着解决方案来了。
首先把下面这段代码粘贴到你主题的style.css里面,或者functions.php。如果不想主题更新失效,就去主题后台自定义代码里面粘贴。

.smartideo { z-index: 0; text-align: center; background: #CCC; line-height: 0; text-indent: 0; }
.smartideo embed, .smartideo iframe { padding: 0; margin: 0; }
.smartideo .player { width: 100%; height: 500px; overflow: hidden; position: relative; }
.smartideo .player a.smartideo-play-link { display: block; width: 50px; height: 50px; text-decoration: none; border: 0; position: absolute; left: 50%; top: 50%; margin: -25px; }
.smartideo .player a.smartideo-play-link p { display: none; }
.smartideo .player .smartideo-play-button { width: 0; height: 0; border-top: 25px solid transparent; border-left: 50px solid #FFF; border-bottom: 25px solid transparent; }
.smartideo .tips { background: #f2f2f2; text-align: center; max-height: 32px; line-height: 32px; font-size: 12px; }
.smartideo .tips a { text-decoration: none; }
@media screen and (max-width:959px){
    .smartideo .player { height: 450px; }
}
@media screen and (max-width:767px){
    .smartideo .player { height: 400px; }
}
@media screen and (max-width:639px){
    .smartideo .player { height: 350px; }
}
@media screen and (max-width:479px){
    .smartideo .player { height: 250px; }
}

样式代码粘贴以后,每次发布文章需要调用视频的时候,粘贴下面这行代码到编辑器的文本里面进行替换:

WordPress插入哔哩哔哩(B站)视频自适应样式代码

代码放不进来,请在文章下方获取完整代码文件

代码链接

版权声明:比特星球 发表于 2020-09-15 19:20:28。
转载请注明:WordPress插入哔哩哔哩(B站)视频自适应样式代码 | 比特星球

暂无评论

暂无评论...