内容加载时边框大小调整毛刺

Question

在加载边框内容（视频）之前，我的边框大小不正确。我有一个元素列表，每个元素都可以点击 - 这将为每个不同的元素加载一个新的视频（动画）。由于视频的加载时间可能很短，因此有时需要1-2秒才能显示。在此期间，边框大小偏离并与我的其他元素重叠。视频加载后，边框会“捕捉”到正确的大小。

如何保持边界不被这样做？

这是HTML：

<div id="video"><video id="animation" autoplay="" loop="" muted=""><source src="videos/xxxxxxx.mp4" type="video/mp4"></video></div>

这是我的CSS：

#animation{
border: 5px solid #c00;
height: 100%;
}

#video{
height: 50%;
}

这是问题的照片（我已经在网站上写了一下）。请注意，在加载视频之前，边框过大且重叠。

如果我能提供任何额外的信息或代码，请告诉我。

Answer 1

您应该做的是将视频的宽度设置为固定的。     #video {width：300px;}      #video video {width：100％;}