专注WP
建站技术分享

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放

办公人导航

由于B站的视频不需要播放广告就可以直接观看,很多站长会选择将视频上传到B站,然后嵌入到自己的网站中。但是当我们使用分享复制嵌入代码插入wordpress网站中,会发现视频显示尺寸不合适,而且视频还会自动播放。下面wp站长圈就和大家分享WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放的方法。

1.复制B站视频嵌入代码

点击视频下方分享按钮,点击嵌入代码即可复制。

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放插图

<iframe src="//player.bilibili.com/player.html?aid=755602045&bvid=BV1B64y1f7nQ&cid=266037987&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2.修改代码使视频屏幕自适应,以及取消自动播放

自适应屏幕尺寸代码

在获取的嵌入代码里面后面添加这段代码:style=”width:100%;aspect-ratio:16/9;”。这段代码作用是给视频做了样式设置,width:100%可以实现宽度尺寸自适应屏幕尺寸,aspect-ratio:16/9设置视频显示尺寸比例为16:9。

取消视频自动播放

wordpress网站嵌入B站视频。默认会自动播放,这样对用户体验不太好,而且一个文章内插入多个视频,这个些视频还会一起自动播放。可以在视频 src=url 链接最后加上:&autoplay=0,来解决视频自动播放问题。

<iframe style="width: 100%; aspect-ratio: 16/9;" src="//player.bilibili.com/player.html?aid=755602045&bvid=BV1B64y1f7nQ&cid=266037987&p=1&autoplay=0" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe>

大家注意对比区别

默认嵌入视频代码

<iframe src=”//player.bilibili.com/player.html?aid=755602045&bvid=BV1B64y1f7nQ&cid=266037987&p=1″ scrolling=”no” border=”0″ frameborder=”no” framespacing=”0″ allowfullscreen=”true”> </iframe>

修改后的嵌入视频代码

<iframe style=”width: 100%; aspect-ratio: 16/9;” src=”//player.bilibili.com/player.html?aid=755602045&amp;bvid=BV1B64y1f7nQ&amp;cid=266037987&p=1&autoplay=0” frameborder=”no” scrolling=”no” allowfullscreen=”allowfullscreen”> </iframe>

3.wordpress网站中插入代码

不同的wordpress版本以及使用的编辑器不同操作方法可能不同。通用的方法可以点击编辑切换到文本模式,将嵌入代码直接复制到需要插入视频的位置即可。

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放插图1

默认嵌入视频效果

修改后嵌入视频效果

4.更多嵌入代码说明

如果需要设置要更多B站视频嵌入代码设置选项,可以参考下面关于iframe引用的B站官方参数设置。

设置方法就是在src=url链接后面添加:&参数名=参数数值

比如弹幕关闭:&danmaku=0,以此类推。更多参数名:autoplay,danmaku,muted,hasMuteButton,hideCoverInfo,hideDanmakuButton,noFullScreenButton,fjw,t

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放插图2

未经允许不得转载:WP站长圈 » WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放