网页中通过css实现视频显示自适应

基本原理是使用媒体查询实现，下面直接上代码

1. 视频播放的html标签。

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

2. 在CSS中设置视频播放器的样式，使视频播放器适应不同屏幕的大小。

video {
width: 100%;
height: 100%;
object-fit: cover;
}

上述CSS属性可以设置视频播放器的宽度和高度均为100%，并且使用object-fit: cover；属性使视频播放器自适应不同屏幕的大小。

3. 添加媒体查询，根据设备屏幕尺寸自动调整视频播放器的大小和位置。

@media screen and (max-width: 800px) {
video {
width: 60%;
height: 40%;
}

上述媒体查询可以根据设备的最大屏幕尺寸，将视频播放器的宽度调整为60%，高度调整为40%。
其他屏幕尺寸样式可自行设置，通过使用CSS视频显示自适应技术，可以在不同的屏幕上实现相同的视频播放效果，并适应不同设备屏幕尺寸。