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

0    176    1

Tags:

👉 本文共约1983个字,系统预计阅读时间或需8分钟。

原文:https://mp.weixin.qq.com/s/wugPNcHLe9mVxurbHhX2EQ

简介

如何把B站(Bilibili)上传的视频嵌入到WordPress网站中,并且自适应屏幕大小,桌面端和移动端自动适配。并且取消默认的自动播放,通过1段html代码即可实现。

1. 获取B站视频链接

打开要嵌入的B站视频,在视频下方有个分享,悬停可以看到最后一个选项【嵌入代码】

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

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

先复制保存这个嵌入代码

2. 修改嵌入代码

如果直接添加上面的代码到网站,显示的尺寸不太协调,是一个很窄的长条,不够美观也不利于观看。所以我们需要稍微修改下嵌入代码。

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

2.1 自适应屏幕尺寸

要实现自适应屏幕尺寸,在上面获取的嵌入代码里面后面添加1段代码:style=”width:100%;aspect-ratio:16/9;”

这1小段代码作用是给视频做了样式设置:width:100%可以实现宽度尺寸自适应屏幕尺寸,aspect-ratio:16/9设置视频显示尺寸比例为16:9

2.2 禁止自动播放

如果不修改代码,会在打开文章页面的时候,视频就会直接自动从头开始播放,突然的声音可能带来不必要的惊吓,并且会让访问者错过开头,显得很突兀。

要取消自动播放,只需在视频 src=url 链接最后加上:&autoplay=0

3. 代码添加到WordPress

在页面、文章、侧边栏等需要添加视频的地方,选择添加【自定义HTML】

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

在【自定义HTML】代码块里面输入上面修改的嵌入代码,保存即可。

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

保存之后,访问前端页面,可以看到可以正常显示播放。

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

4. 更多B站嵌入代码修改

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

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

比如弹幕关闭:&danmaku=0,以此类推

参数名参数用途使用方法
autoplay是否自动播放(默认否)1: 开启, 0: 关闭
danmaku默认弹幕开关(默认开启)1: 开启, 0: 关闭
muted是否默认静音(默认否)1: 开启, 0: 关闭
hasMuteButton一键静音按钮是否显示(默认不显示1: 开启, 0: 关闭
hideCoverInfo视频封面下方是都显示播放量弹幕量等信息(默认显示)1: 开启, 0: 关闭
hideDanmakuButton是否隐藏弹幕按钮(默认不隐藏)1: 开启, 0: 关闭
noFullScreenButton是否隐藏全屏按钮(默认显示)1: 开启, 0: 关闭
fjw是否开始记忆播放(默认开启)1: 开启, 0: 关闭
t默认开始时间(默认0)直接填写数值,单位秒

标签:

Avatar photo

小麦苗

学习或考证,均可联系麦老师,请加微信db_bao或QQ646634621

您可能还喜欢...

发表回复

嘿,我是小麦,需要帮助随时找我哦。
  • 18509239930
  • 个人微信

  • DB宝
  • 个人邮箱
  • 点击加入QQ群
  • 个人微店

  • 回到顶部