wordpress使用iframe嵌入bilibili视频测试页

wordpress博客调用bilibili哔哩哔哩视频自适应

图片[1]_wordpress使用iframe嵌入bilibili视频测试页_听书网_聚音阁

直接在WordPress后台,写文章的时候,选择源代码,然后把下面的代码直接粘贴进去就可以调用了。

电脑和手机都是自适应的。

代码如下

<iframe id="testbilibili" src="https://player.bilibili.com/player.html?aid=81950498&bvid=BV1XJ411j71B&cid=140229974&page=1&danmaku=0&high_quality=1" width="95%" frameborder="no" scrolling="no" seamless="" allowfullscreen="allowfullscreen"></iframe>
<script type="text/javascript">
document.getElementById("testbilibili").style.height = document.getElementById("testbilibili").scrollWidth*0.7+"px";
</script>

使用方法

代码里的 aid=81950498&bvid=BV1XJ411j71B&cid=140229974 这段是调用视频的地址,需要自己改你调用的视频地址。

我这次条用的视频地址是

http://player.bilibili.com/player.html?aid=81950498&bvid=BV1XJ411j71B

直接在你要调用的视频下面,有一个分享按钮,点击它,选择嵌入代码 选择复制,就会得到下面的嵌入视频的地址,需要修改的地方我用红色标记下来。

你只需要把标记红色的地方换成自己调用的视频代码就可以。

<iframe src=”//player.bilibili.com/player.html?aid=81950498&bvid=BV1XJ411j71B&cid=140229974&page=1″ scrolling=”no” border=”0″ frameborder=”no” framespacing=”0″ allowfullscreen=”true”> </iframe>

大家可以对照一下,需要改哪里就明白了。

调用视频效果如下

 

参数名 备注
id 一个独特的名称用于后续js识别
src 视频iframe地址,可以通过bilibili分享直接获得
page 第几p视频
danmaku 弹幕是否开启
high_quality 是否高清晰度
scrolling 是否显示滚动条
frameborder iframe边框
seamless 减少突兀感
allowfullscreen 允许全屏
width 宽度
© 版权声明
THE END
喜欢本篇文章就点赞支持一下吧,你的支持是对我最大的鼓励。
点赞0
分享
评论区 抢沙发
聚音阁的头像_听书网_聚音阁

昵称

取消
昵称