WP插入B站视频自适应尺寸

还是要靠AI呀！

快速实现（二选一）

方案 1：直接改 iframe（古腾堡 “自定义 HTML”）html预览

<iframe style="width:100%;aspect-ratio:16/9;" src="//player.bilibili.com/player.html?isOutside=true&bvid=BVxxxxxx&p=1&autoplay=0" frameborder="0" allowfullscreen></iframe> 

替换 BVxxxxxx 为你的视频 BV 号；aspect-ratio:16/9 可改为 4/3。

方案 2：容器 + CSS（更稳妥）

1. 文章中插入：

html预览

<div class="bilibili-video-container"> <iframe src="//player.bilibili.com/player.html?isOutside=true&bvid=BVxxxxxx&p=1&autoplay=0" frameborder="0" allowfullscreen></iframe> </div>

2. 主题自定义 CSS 添加：

css.bilibili-video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; } .bilibili-video-container iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:none; } 4:3 则改 padding-bottom 为 75%。

关键参数

• autoplay=0 关闭自动播放；如需自动，设为 1 并加 muted=1。
• isOutside=true 启用外链模式，避免跳转。
• p=1 指定分 P 页码。

常见问题

• 不缩放：原代码有固定宽高，删去并加 width:100% 与 aspect-ratio 或容器 CSS。
• 加载异常：检查 src 是否为 //player.bilibili.com，避免 http/https 混用；确保 isOutside=true。
• 移动端变形：用 aspect-ratio 或 padding-bottom 容器法，避免固定 height。

我在用的就是方法1。在B站的代码上加

style="width:100%;aspect-ratio:16/9;"