网页视频自适应代码

创建一个自适应的CSS样式，需要确保视频播放器在不同设备和屏幕尺寸上都能保持良好的显示效果。以下是一个简单的CSS样式示例：

css代码：

/* 视频容器基础样式 */
.video-container {
  max-width: 100%; /* 确保视频容器最大宽度不超过其父容器 */
  margin: 0 auto; /* 水平居中 */
  overflow: hidden;
  position: relative;
  background-color: #000; 
}

/* 视频播放器样式 */
.video-container video {
  width: 100%; /* 在所有设备上宽度自适应 */
  height: auto; /* 高度自适应保持宽高比 */
  display: block; /* 去除视频下方的空隙 */
}

/* 电脑端固定宽高比 */
@media (min-width: 1024px) {
  .video-container {
    width: 960px; /* 电脑端固定宽度，可根据需要调整 */
    height: 540px; /* 根据16:9宽高比计算的高度 */
  }
  .video-container video {
    width: 100%; /* 视频宽度依然自适应 */
    height: 100%; /* 视频高度也自适应 */
  }
}

html代码：

<div class="video-container">
  <video preload="metadata" loop="loop" controls="controls" poster="static/images/sp.png">
    <source src="/upload/video/20211217/1639711078197093.mp4" type="video/mp4"/>
    Your browser does not support the video tag.
  </video>
</div>