/* 响应式布局 */  
.video-list {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between;  
  margin: 30px;
}  
  
.video-item {  
  width: calc(33.33% - 10px); /* 每行3个视频 */  
  margin-bottom: 20px;  
  position: relative;  
}  
  .video-size {  
  max-width: 640px; /* 最大宽度为640像素 */  
  max-height: 480px; /* 最大高度为480像素 */  
  width: 100%; /* 宽度为父元素宽度的100%，但不超过max-width */  
  height: auto; /* 高度自动，以保持视频的宽高比 */  
}
@media screen and (max-width: 600px) {  
  .video-item {  
    width: calc(100% - 20px); /* 手机每行1个视频 */  
  }  
}  
  
.video-item img {  
  width: 100%;  
  height: auto;  
  cursor: pointer;  
}  
  
/* 模态框样式 */  
.modal {  
  display: none; /* 默认隐藏 */  
  position: fixed; /* 停留在页面顶部 */  
  z-index: 1; /* 位于页面其他元素之上 */  
  left: 0;  
  top: 0;  
  width: 100%; /* 宽度为父元素宽度的100%，但不超过max-width */  
  height: auto; /* 高度自动，以保持视频的宽高比 */  
  overflow: auto; /* 启用滚动条，如果内容超出视图 */  
  background-color: rgb(0,0,0); /* 黑色背景 */  
  background-color: rgba(0,0,0,0.5); /* 黑色背景，半透明 */  
}  
  
.modal-content {  
  position: relative;  
  background-color: rgba(0,0,0,0);  
  margin: 15% auto; /* 15% 距顶部，水平居中 */  
  margin: 15% auto;
  padding: 20px;  
  border: 0px solid #888;  
  width: 80%; /* 宽度可以是 50% 到 100% */  
  max-width: 700px; /* 最大宽度 */  
}  
  
.close {  
  color: #aaa;  
  float: right;  
  font-size: 28px;  
  font-weight: bold;  
  cursor: pointer;  
}  
  
.close:hover,  
.close:focus {  
  color: black;  
  text-decoration: none;  
  cursor: pointer;  
}  
  
/* 其他样式... */