### 如何去除
哔哩
哔哩
视频嵌入或播放时的黑边
在
嵌入哔哩
哔哩
视频到网
站时，可能会遇到
视频周围出现黑边的问题。这通常是由于
视频的比例与容器比例不一致所导致的。解决这一问题的关键在于调整
嵌入代码
中的参数以及设置合适的样式。
#### 方法一：调整 `
iframe` 的宽度和高度
默认情况下，B
站提供的
嵌入代码会指定固定的宽度 (`width`) 和高度 (`height`) 参数。如果这些值与页面布局不符，则可能导致黑边现象。可以通过动态计算并适配容器大小来解决问题：
```
html
<
iframe
src="//player.bilibili.com/player.
html?aid=7
53941281&bvid=BV1Zk4y127E
5&cid=21
518970
5&page=1"
style="width: 100%; height: auto;"
frameborder="no"
scrolling="no"
allowfullscreen="allowfullscreen">
</
iframe>
```
这里将 `width` 设置为 `100%` 并移除固定的高度属性，使
视频能够根据父级容器自动调整尺寸[^2]。
---
#### 方法二：利用 CSS 实现响应式设计
为了进一步优化体验，可以借助 CSS 来实现完全自适应的效果。以下是具体方法：
```css
.video-container {
position: relative;
padding-bottom:
56.2
5%; /* 这里表示宽高比为 16:9 */
overflow: hidden;
}
.video-container
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
HTML 结构如下所示：
```
html
<div class="video-container">
<
iframe
src="//player.bilibili.com/player.
html?aid=7
53941281&bvid=BV1Zk4y127E
5&cid=21
518970
5&page=1"
frameborder="no"
scrolling="no"
allowfullscreen="allowfullscreen">
</
iframe>
</div>
```
这种方法通过创建一个相对定位的容器，并结合百分比填充的方式确保
视频始终保持特定的宽高比 (如常见的 16:9)，从而有效消除多余的黑边[^2]。
---
#### 方法三：裁剪
视频内容以匹配目标区域
如果仍然存在无法避免的黑边情况，也可以考虑对源
视频本身进行处理。例如，在上传之前预先将其裁切成适合的目标分辨率 (如正方形或其他特殊形状)。然而需要注意的是，这种方式可能会影响原
视频的内容完整性[^3]。
---
#### 总结
综上所述，最推荐的做法是采用 **CSS 响应式技术** 配合灵活调整后的
HTML 属性完成无黑边的 B
站视频嵌入操作。这样不仅解决了视觉上的瑕疵，还提高了跨设备兼容性和用户体验质量。
博客介绍了禁止视频自动播放的设置方法，只需在视频链接后加上&autoplay=0即可。
扫一扫
到【灌水乐园】发言
7507
