曾经尝试将一些心理学的视频素材放到自己的网站上,结果发现下载的流量费实在承受不起。于是就将这个事搁置了很久,最近还是希望能嵌入些视频,只不过是通过嵌入视频网站的方法实现。
首选“学习网站”B站。将素材上传后,打开视频播放页面,鼠标悬停于视频下方的分享图标,并点击【嵌入代码】,提示“已成功复制到剪贴板”就说明成功了。代码大体如下:

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=112721936778901&bvid=BV1G2hrerEKQ&cid=500001603727917&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

打开WordPress后台,在文章编辑页面中,插入自定义HTML区块,然后复制上述代码在文本框中。
WordPress插入自定义HTML区块.jpg
WordPress插入自定义HTML区块代码.jpg
预览一下效果。
WordPress插入B站视频.jpg
在我网站上的默认效果就是这样,缩成一团。利用另一篇文章中提到过的方法(添加js代码),不知为何在我的网站上实现效果也不好。
插入B站视频效果2.jpg

修改嵌入代码

事实上,网上有更加方便的方法,甚至都不需要用到js代码。
首先,要实现自适应屏幕尺寸,在上面获取的<iframe>代码的最后添加如下内容:style=”width:100%;aspect-ratio:16/9;”

它的作用是给视频做了样式设置:width:100%可以实现宽度尺寸自适应屏幕尺寸,aspect-ratio:16/9设置视频显示尺寸比例为16:9。
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=112721936778901&bvid=BV1G2hrerEKQ&cid=500001603727917&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style=”width:100%;aspect-ratio:16/9;”></iframe>

预览效果如下:
插入B站视频效果3.jpg

更多B站嵌入代码修改

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

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

比如自动播放关闭:&autoplay=0;或者是弹幕关闭:&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) 直接填写数值,单位秒

参考文章:
https://freechao.com/6143.html

最后修改:2024 年 07 月 08 日
如果觉得我的文章对你有用,请随意赞赏