.video-container {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: flex-start; /* 或者使用 space-between 来均匀分布视频项 */  
}  
  
.video-item {  
    flex: 0 0 calc(25% - 15px); /* 每个视频占据25%宽度减去间距 */  
    margin: 0 7.5px 10px 7.5px; /* 上下边距为10px，左右边距为7.5px，以保持视频项之间的10px间距 */  
    text-align: center;  
}  
  
/* 在小屏幕上调整布局 */  
@media (max-width: 800px) {  
    .video-item {  
        flex: 0 0 calc(50% - 10px); /* 在小屏幕上每排放置两个视频项 */  
        margin: 0 5px 10px 5px; /* 保持视频项之间的10px间距 */  
    }  
}  
  
@media (max-width: 400px) {  
    .video-item {  
        flex: 0 0 100%; /* 在非常小的屏幕上每排只放置一个视频项 */  
        margin: 0 0 10px 0; /* 移除左右间距 */  
    }  
}