有以下几种方法:
利用 B 站提供的嵌入代码调整
1.获取 B 站视频嵌入代码:打开要嵌入的 B 站视频,点击视频下方的 “分享” 按钮,悬停后选择 “嵌入代码” 并复制。
1.1修改代码调整宽度
1.1.1固定宽度:若想设置固定宽度,如 800px,将获取的嵌入代码中的<iframe>
标签修改为<iframe width="800" src="//player.bilibili.com/player.html?其他参数"></iframe>
。
1.1.2自适应宽度:若希望视频宽度自适应屏幕,可以在嵌入代码的<iframe>
标签中添加style="width:100%;aspect-ratio:16/9;"
。其中width:100%
表示宽度占满容器,aspect-ratio:16/9
设置视频显示尺寸比例为 16∶9。
1.1.3在 WordPress 中嵌入代码:在 WordPress 的页面或文章编辑器中,切换到 “文本” 模式,将修改后的代码粘贴到合适位置。
2使用插件调整
2.1安装插件:如 EmbedPress 等支持视频嵌入和自定义的插件。在 WordPress 后台,进入 “插件”→“添加新插件”,搜索 “EmbedPress”,点击 “安装” 并 “激活”。
2.2获取 B 站视频链接:复制要嵌入的 B 站视频的链接地址。
在 WordPress 中嵌入视频:在 WordPress 的页面或文章编辑器中,使用 EmbedPress 插件提供的功能来嵌入 B 站视频链接。
2.3调整视频宽度:一般插件会提供相关的设置选项,可在插件设置或视频嵌入的编辑界面中找到宽度设置选项,输入具体的宽度值或选择自适应等选项来调整视频宽度。
3.通过 CSS 代码调整
3.1获取 B 站视频嵌入代码:同上述第一种方法的第一步操作,获取 B 站视频的嵌入代码。
3.2在 WordPress 中嵌入代码:在 WordPress 的页面或文章编辑器中,切换到 “文本” 模式,将嵌入代码粘贴到合适位置,并给<iframe>
标签添加一个class
类,如<iframe class="bilibili-video" src="//player.bilibili.com/player.html?其他参数"></iframe>
。
3.3添加 CSS 代码:在 WordPress 后台,进入 “外观”→“编辑”,在右侧找到 “style.css” 文件,在文件中添加如下 CSS 代码:
.bilibili-video {
width: 80%; /* 这里可以修改为你想要的宽度值,如500px、70%等 */
height: auto;
max-width: 100%;
display: block;
margin: 0 auto; /* 使视频水平居中 */
}