WordPress插入哔哩哔哩bilibili视频

即可较好的适配大屏幕,但是到手机上就不太好用了,不能自动适配,怎么办呢,看下面的两种办法:

方法一

外面包裹一个div标签,div标签自适应与屏幕的大小,包裹内iframe以100%顶边撑开。
以riplus主题为例子:在自定义css下底部添加以下css代码:

/*哔哩哔哩视频适配*/
.bilibili{
    position: relative;
    width: 100%;
    height: 0;              /*高度设置这里无效,设置为0,用padding撑开div*/
    padding-bottom: 75%;    /*68%到80%都可以*/
}
.bilibili iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

插入时写成如下形式即可:

<div class="bilibili">
    <iframe src="//player.bilibili.com/player.html?aid=246174762&bvid=BV1hv411W7Fc&cid=283936497&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

方法二
使用@media属性,对不同屏幕大小的设备,设置宽度和高度。
@media可以查询到设备的以下属性

1.设备屏幕的高度
2.设备的方向(如移动设备横屏)
3.可视窗口的宽高
4.屏幕解析度

和上面一样,在指定位置插入css代码:

/*哔哩哔哩视频适配*/
.bilibili {
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .bilibili {height: 15em;max-width: 25em;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bilibili {height: 20em;max-width: 30em;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bilibili {height: 30em;max-width: 40em;}
}
@media only screen and (min-width: 1200px) {
    .bilibili {height: 40em;max-width: 50em;}
}

然后直接引用B站的iframe代码加上class="bilibili":

<iframe class="bilibili" src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

tips
B站链接的参数
player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1

key说明
说明视频ID 就是B站的av号
cid应该是客户端的id,clientid的缩写(推测) 测试表示不填也不会有什么问题
page第几个视频 也就是分P的 默认是1
as_wide是否宽屏 1:宽屏 0:小屏
high_quality视频质量 1:最高视频质量 0:最低视频质量
danmaku是否开启弹幕 1:开启(默认) 0:关闭

阻止跳转B站

在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframe 的 sandbox 属性去禁止
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"

<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts> </iframe>

修改默认视频质量

B站默认视频质量是最低的,可以通过在src链接后面添加&high_quality=1来设置

<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts> </iframe>
RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
HMAU » WordPress插入哔哩哔哩bilibili视频