css video

/* 设置视频样式的基本示例 */

video {
  width: 100%; /* 视频宽度为容器的100% */
  height: auto; /* 自动调整高度以保持宽高比 */
  border: 2px solid #333; /* 添加一个深灰色边框 */
  border-radius: 8px; /* 圆角边框 */
}

/* 当鼠标悬停在视频上时，添加阴影效果 */
video:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

/* 控制栏样式 */
video::-webkit-media-controls {
  background-color: #f1f1f1; /* 更改控制栏背景颜色 */
}

/* 播放按钮样式 */
video::-webkit-media-controls-play-button {
  background-color: #ff6600; /* 更改播放按钮背景颜色 */
}

解释说明：

• video 选择器用于设置所有 <video> 元素的样式。
• width: 100% 和 height: auto 确保视频能够自适应其容器的大小，并保持原始的宽高比。
• border 和 border-radius 用于为视频添加边框和圆角。
• video:hover 选择器定义了当用户将鼠标悬停在视频上时的样式，这里添加了一个阴影效果。
• video::-webkit-media-controls 和 video::-webkit-media-controls-play-button 是 WebKit 浏览器（如 Chrome 和 Safari）特有的伪元素，用于自定义视频控件的外观。