/* 響應式布局 */  
.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;  
}  
  
/* 其他樣式... */