【折腾】往你的博客里放bilibili视频
2020-04-08 | 【折腾】 | 暂无评论 | 414 次阅读 | 311字
昨天,我在一篇文章里放了你个B站视频,不知道小伙伴们看了没有,没看的去看看吧。
那么,这是怎么做出来的呢?本篇文章,我就带大家来放B站视频。话不多说,正文开整!!!
首先,你得先在B站上面弄一个视频的播放代码,就像这样:
<iframe src="//player.bilibili.com/player.html?aid=90669672&bvid=BV1N7411A7Yo&cid=154836866&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
那么,这怎么弄下来呢?进入网页版哔哩哔哩,然后打开一个视频,接着点分享,然后就会有“视频嵌入代码”了。
注意,是嵌入代码,不是视频地址!
然后,在你的网站的CSS目录下面新建一个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
}
保存为bilibili.css,继续。
接着在你的网站的<head></head>的里面填写如下代码:
<link rel="stylesheet" href="<?php Helper::options()->themeUrl(); ?>css/bilibili.css" />
保存文件后,还要记得在你刚刚复制的视频代码中加上
class=”iframe_video”
就像这样:
<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=90669672&bvid=BV1N7411A7Yo&cid=154836866&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
最后,把这一段代码放到你的文章里面就大功告成啦!效果如下:
好,本篇【折腾】到这里就告一段落了。我是Stephen Zeng,如果有什么写的不好的地方或者你有什么建议或感想,欢迎在评论区畅所欲言。我们下篇文章再见!
拜拜ヾ(?ω?`)o
本篇文章未指定许可协议。
arrow_back
上一篇
arrow_forward
下一篇