如何修复桌面端全屏状态下html video比例显示异常问题

问题核心触发原因是视频元素或其播放器容器的尺寸、比例适配规则未覆盖全屏场景，按以下步骤配置即可让全屏状态自动适配视频原有宽高比：

• 配置视频元素基础适配规则
  首先给全站视频元素添加基础CSS，禁止强行拉伸视频，优先遵循视频自身固有比例渲染：

  video {
    max-width: 100%;
    height: auto;
    /* 核心属性：保证视频始终保持原有比例，完整显示在容器内不拉伸 */
    object-fit: contain;
  }
  

  如果需要全屏铺满屏幕、允许边缘裁切，可以把object-fit属性值改为cover，要保留完整画面、适配原有比例必须用contain
• 补全全屏状态的专属样式规则
  浏览器切全屏时会给触发全屏的元素追加原生伪类，默认样式可能和站点自定义样式冲突，需要专门覆盖全屏下的异常属性，兼容所有主流浏览器：

  /* 匹配webkit、gecko、标准规范下的全屏状态 */
  video:fullscreen,
  video:-webkit-full-screen,
  video:-moz-full-screen {
    /* 强制全屏元素占满整个视口，清除自定义固定宽高的影响 */
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain;
    /* 清除可能偏移位置的自定义属性 */
    position: fixed !important;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    transform: none;
  }
  

  如果你用的是自定义封装的播放器（不是直接给原生video标签触发全屏），把上述选择器里的video替换成你的播放器外层容器类名即可，同时要保证容器内部的video标签设置为width: 100%; height: 100%; object-fit: contain。
• 排查JS逻辑的硬编码冲突
  如果样式加完仍有比例错乱，检查自定义全屏切换的JS代码，删掉触发全屏时给视频/容器强行写入固定宽高的逻辑（比如硬编码width: 1920px、height: 800px这类和用户实际屏幕分辨率不匹配的行内样式），这类行内样式优先级高于外联CSS，会覆盖自适应规则。
• 校验视频转码环节的配置
  若普通非全屏状态下视频比例已经不对，需要检查站点上传视频后的转码逻辑，转码时不要强制输出固定分辨率的画面，要保留原视频的宽高比参数，避免转码输出的视频本身比例就被拉伸。

配置完成后强制刷新页面清除浏览器缓存，再触发全屏即可正常适配视频原有比例，不会出现拉伸、变形的问题。

内容的提问来源于stack exchange，提问作者Marcus