[分享]css3怎么让视频自适应屏幕宽度

要让视频自适应屏幕宽度，我们可以利用CSS3的flexbox布局和媒体查询来实现。以下是具体的代码实现：

.video-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-wrapper video {
  max-width: 100%;
  height: auto;
}
  
@media screen and (max-width: 768px) {
  .video-wrapper {
    flex-direction: column;
  }
} 

首先，我们将包含视频的容器设置为flex布局，并且将flex的垂直和水平对齐方式都设置为居中。接着，我们给视频设置一个最大宽度为100%的样式，并将高度设置为auto，以确保视频的纵横比得到保持。这样当屏幕宽度改变时，视频将根据容器的大小而自适应变化。

同时，我们也可以利用媒体查询来检测屏幕宽度是否小于768px，如果是，则将容器的flex-direction属性设置为column，以实现视频在竖屏设备上的自适应布局。

通过以上的代码实现，我们可以轻松地实现视频自适应屏幕宽度的效果，使网站在各类设备上都能正常显示视频内容。