HTML中视频被裁剪变形，如何调整为16:9播放比例？

你需要在HTML代码里调整视频的展示设置，而不是视频文件本身（.mov文件里没有播放宽高比的设置），具体可以这么操作：

• 用CSS容器固定宽高比
  给视频套一个容器，用CSS的aspect-ratio属性直接指定16:9，视频会自动适配比例，避免变形：

  <div style="aspect-ratio: 16/9; width: 100%;">
    <video src="telio ticker crop.mov" style="width: 100%; height: 100%; object-fit: contain;"></video>
  </div>
  

  其中object-fit: contain会保证视频完整显示，不会裁剪；如果想让视频铺满容器（允许裁剪边缘），可以改成object-fit: cover。

• 直接给video标签设置比例宽高
  不想用容器的话，也可以直接给video标签设置16:9比例的宽高，比如标准16:9分辨率：

  <video src="telio ticker crop.mov" width="1280" height="720" controls></video>
  

  也可以用百分比适配，比如width: 80%; height: auto;，让高度自动按比例匹配宽度。

• 检查现有代码的样式问题
  看截图里的视频大概率是已有CSS样式导致变形/裁剪，找一下代码里有没有给video或它的父元素设置固定宽高、object-fit、transform这类属性，把这些调整成符合16:9的设置即可。

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