CSS设置video初始化宽度为86vw时，如何确保在不同屏幕下自适应且不失真？

Question

在使用CSS将video初始化宽度设置为86vw时，如何确保视频在不同屏幕尺寸下自适应且保持原有宽高比例不失真？常见的问题是：当屏幕较窄（如移动设备）或较宽（如大屏显示器）时，视频可能出现横向或纵向超出容器、留白过多或拉伸变形的情况。解决此问题需结合`max-width: 100%`和`height: auto`属性，使视频宽度随父容器变化同时自动调整高度以维持比例。此外，可利用媒体查询（@media）针对特定屏幕范围设置不同的宽度值，例如在小屏幕下将宽度改为100%以充分利用空间。还需注意父容器的样式设计，通过`object-fit: cover`或`contain`控制视频填充行为，避免内容裁剪或空白区域产生，从而实现全屏适配与视觉一致性。