video标签外层div包裹容器出现异常额外宽度问题排查求助

问题原因 #

你遇到的包裹容器额外宽度是默认块级元素的宽度行为导致的：

• .video-wrap 是默认的块级元素，在没有明确限制宽度的场景下，会尽可能撑满Grid布局分配给该子项的可用宽度，而非收缩到与内部<video>元素的实际显示尺寸一致。
• 你给<video>设置的max-width/max-height仅限制了video本身的渲染尺寸，不会反向约束父容器的宽度计算。

解决方案 #

只需要给.video-wrap添加任意一个让容器收缩到内容宽度的CSS属性即可：

方案1：使用fit-content宽度

.video-wrap{
    position: relative;
    width: fit-content;
}

方案2：修改为行内块元素

.video-wrap{
    position: relative;
    display: inline-block;
}

修改后.video-wrap的宽高会完全和内部video元素的实际渲染尺寸对齐，你后续要在容器内添加相对定位的自定义组件也会完全以视频边界为基准，符合你的需求。

内容的提问来源于stack exchange，提问作者Fluxian