MP4视频在video元素中被裁切，需实现完整覆盖显示

问题核心在于你使用了objectFit: 'cover'——这个属性会通过裁切视频来强制填满容器，同时维持视频自身的宽高比；再加上你的video元素宽高比（600:400=3:2）和目标视频的宽高比（16:9）不匹配，最终导致了严重裁切。

下面给你两种可行的解决思路：

方法一：让video元素宽高比与视频一致（推荐） #

BigBuckBunny是标准16:9比例的视频，调整video的宽高让比例匹配，这样视频就能完美填满容器且无裁切、不变形：

<video
  loop
  muted
  width={600}
  height={600 * 9 / 16} // 按16:9比例计算对应高度，约337.5
  style={{ objectPosition: 'center', objectFit: 'cover' }}
>
  <source
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  ></source>
</video>

方法二：保留现有容器尺寸，拉伸填充（会变形） #

如果必须维持600x400的容器尺寸，又要完全覆盖无裁切，可以把objectFit改为fill，但视频会被强制拉伸适配容器比例：

<video
  loop
  muted
  width={600}
  height={400}
  style={{ objectPosition: 'center', objectFit: 'fill' }}
>
  <source
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  ></source>
</video>

注意：这种方式会破坏视频原始比例，导致画面变形，仅在特殊场景下使用。

另外补充：source标签上的objectFit和objectPosition样式是无效的，直接删除即可，这些样式只需要作用在video标签上。

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