曾经尝试将一些心理学的视频素材放到自己的网站上,结果发现下载的流量费实在承受不起。于是就将这个事搁置了很久,最近还是希望能嵌入些视频,只不过是通过嵌入视频网站的方法实现。
首选“学习网站”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
区块,然后复制上述代码在文本框中。
预览一下效果。
在我网站上的默认效果就是这样,缩成一团。利用另一篇文章中提到过的方法(添加js代码),不知为何在我的网站上实现效果也不好。
修改嵌入代码
事实上,网上有更加方便的方法,甚至都不需要用到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站嵌入代码修改
如果要更改更多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) | 直接填写数值,单位秒 |