WordPress插入哔哩哔哩(B站)视频自适应PC电脑端的样式代码

免VIP观影

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

WordPress插入哔哩哔哩(B站)视频自适应PC电脑端的样式代码
是不是不太好?
站长带着解决方案来了。
首先把下面这段代码粘贴到你主题的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站)视频自适应PC电脑端的样式代码

代码放进来,请复制获取完整代码文件

<center><div class="smartideo">
<div class="player"><iframe src="//player.bilibili.com/player.html?aid=XXXXX" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="100%"> </iframe></div>
</div></center>

把//player.bilibili.com/player.html?aid=XXXXX这行替换为你需要调用的视频就可以啦
下面我们来看看案例:

 

 

广告也精彩

相关文章

免VIP观影

暂无评论

暂无评论...