menu Stephen Space
more_vert
chevron_right 首页 » 【折腾】 » 正文
【折腾】往你的博客里放bilibili视频
2020-04-08 | 【折腾】 | 暂无评论 | 414 次阅读 | 311字

    昨天,我在一篇文章里放了你个B站视频,不知道小伙伴们看了没有,没看的去看看吧。

    那么,这是怎么做出来的呢?本篇文章,我就带大家来放B站视频。话不多说,正文开整!!!
1.gif
    首先,你得先在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>

    那么,这怎么弄下来呢?进入网页版哔哩哔哩,然后打开一个视频,接着点分享,然后就会有“视频嵌入代码”了。
bilibili_share.png
    注意,是嵌入代码,不是视频地址!
    然后,在你的网站的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

None
发表评论
暂无评论
textsms
account_circle
email
link
arrow_back 上一篇
arrow_forward 下一篇