.video-box {
    width: 90%; /* 容器宽度占页面 80% */
    max-width: 1200px; /* 最大宽度不超过 1200px，避免过大 */
    margin: 0 auto;
	text-align: centerc;/* 上下留 20px 空隙，左右自动（实现水平居中） */
}

/* 视频本身样式：适配容器、边框、圆角等 */
.video-box video {
    width: 100%; /* 视频宽度跟随容器，自动适配 */
    height:400px; /* 高度自动，保持视频比例不拉伸 */
    border: 2px solid #333; /* 2px 深灰色边框 */
    border-radius: 8px; /* 8px 圆角，更美观 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影，增强层次感 */
    margin: 0 auto; /* 视频在容器内水平居中（若容器内还有其他情况，可保证视频居中） */
}

/* 小屏幕适配：屏幕宽度不超过 768px 时，调整视频容器宽度 */
@media (max-width: 768px){   
.custom-video {
        max-width: 90%; /* 小屏幕下视频容器占 90% 宽度 */
    }
}
/* 交互：鼠标悬浮在视频容器上时轻微放大 */
.custom-video:hover {
    transform: scale(1.02); /* 放大 1.02 倍 */
    transition: transform 0.3s ease; /* 过渡动画，让放大效果更流畅 */
}


/* 隐藏原生控制栏（如需自定义控制栏时取消注释使用） */
/* 
.custom-video::-webkit-media-controls {
    display: none;
}
*/
   .video-container {
            display: flex;          /* 开启Flex布局 */
            gap: 10px;              /* 视频之间的间距（可选，推荐） */
            padding: 10px;          /* 容器内边距（可选） */
            box-sizing: border-box; /* 防止padding撑大容器 */
	   		align-items: center;
	   		justify-content: space-between;
        }

        /* 2. 控制单个视频的尺寸：自适应宽度+固定比例 */
        .video-item {
            flex: 1;                /* 四个视频平均分配容器宽度 */
            min-width: 200px;       /* 视频最小宽度（防止太窄，可选） */
        }

        /* 3. 让视频自适应容器（避免变形） */
        .video-item video {
            width: 100%;            /* 视频宽度=容器宽度 */
            height: 500px;           /* 高度自动适应（保持16:9比例） */
            border: none;           /* 去除默认边框（可选） */
			aspect-ratio:16/9;
			object-fit: contain;
        }