要在 WordPress 网站上嵌入哔哩哔哩视频并调整其宽度

2025-03-09 61 0

有以下几种方法:

利用 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; /* 使视频水平居中 */
}

相关文章

手动样式化 WordPress 导航菜单

发布评论