在 UEditor 中插入 Bilibili 视频

在 UEditor 中插入 Bilibili 视频时，默认的 iframe 嵌入代码可能会导致视频宽高太小，影响观看体验。我们可以通过调整 iframe 的 width 和 height 属性来设置合适的尺寸。

以下是具体的解决方法：

---

一、手动调整 iframe 的宽高属性

你可以在嵌入代码中直接添加或修改 width 和 height 属性，指定视频的宽度和高度。例如：

<iframe 
    src="//player.bilibili.com/player.html?isOutside=true&aid=114175447670477&bvid=BV1SUQqYxE3F&cid=28906619590&p=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true" 
    width="800" 
    height="450">
iframe>

• width：设置视频的宽度（单位为像素）。
• height：设置视频的高度（单位为像素）。
• 推荐比例：Bilibili 视频通常是 16:9 的宽高比，因此可以根据需要调整宽度和高度。例如：
  • 宽度为 800px，则高度为 800 * 9 / 16 = 450px。
  • 宽度为 640px，则高度为 640 * 9 / 16 = 360px。

---

二、使用 CSS 样式控制宽高

如果你希望更灵活地控制视频的大小，可以使用内联样式或外部 CSS 来定义宽高。例如：

1. 内联样式

在 iframe 标签中添加 style 属性：

<iframe 
    src="//player.bilibili.com/player.html?isOutside=true&aid=114175447670477&bvid=BV1SUQqYxE3F&cid=28906619590&p=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true" 
    style="width: 800px; height: 450px;">
iframe>

2. 使用百分比布局

为了适配不同屏幕尺寸，可以使用百分比设置宽高。例如：

<iframe 
    src="//player.bilibili.com/player.html?isOutside=true&aid=114175447670477&bvid=BV1SUQqYxE3F&cid=28906619590&p=1" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true" 
    style="width: 100%; height: calc(100% * 9 / 16);">
iframe>

• width: 100%：让视频宽度占满父容器的宽度。
• height: calc(100% * 9 / 16)：根据 16:9 的比例动态计算高度。

---

三、确保 iframe 的响应式设计

如果需要视频在不同设备上都能自适应显示，可以结合 CSS 实现响应式布局。例如：

HTML 代码

<div class="video-container">
    <iframe 
        src="//player.bilibili.com/player.html?isOutside=true&aid=114175447670477&bvid=BV1SUQqYxE3F&cid=28906619590&p=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true">
    iframe>
div>

CSS 样式

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

• padding-top: 56.25%：通过设置容器的垂直填充比例（9/16 = 0.5625），实现 16:9 的宽高比。
• iframe 绝对定位：让视频完全填充父容器。

---

四、注意事项

1. HTTPS 协议
   确保 iframe 的 src 属性使用 HTTPS 协议（如 https://player.bilibili.com/...），否则可能会因浏览器安全策略导致无法加载。

2. UEditor 的过滤规则
   如果发现保存后 iframe 被移除或样式丢失，可能是因为 UEditor 或 CMS 对 HTML 内容进行了过滤。需要检查以下配置：

   • 在 ueditor.config.js 中添加 iframe 的白名单规则，允许其属性（如 width、height、allowfullscreen 等）。
   • 如果是 CMS 过滤问题，可以尝试禁用内容过滤功能或修改相关安全设置。

3. 视频加载失败
   如果视频无法正常播放，检查网络连接是否正常，以及嵌入代码是否完整。

---

五、总结

通过调整 iframe 的 width 和 height 属性，或者使用 CSS 样式和响应式布局，可以轻松解决 Bilibili 视频宽高太小的问题。推荐使用 CSS 的响应式方案，以确保视频在不同设备上的兼容性和美观性。