窄屏设备下如何让HTML video标签内的背景视频内容居中显示

要实现video标签内的视频内容居中显示，只需要给video元素添加object-fit和object-position两个CSS属性即可，完整实现方案如下：

基础代码实现 #

HTML结构

<!-- 背景视频标签 -->
<video class="background-video" autoplay muted loop playsinline>
  <source src="你的视频文件路径" type="video/mp4">
</video>

CSS样式

.background-video {
  /* 铺满整个视口作为背景 */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;

  /* 核心控制视频展示规则 */
  object-fit: cover;
  object-position: center;
}

属性说明 #

• object-fit: cover：保持视频原始宽高比，缩放至完全覆盖容器，超出部分自动裁剪，不会出现拉伸变形
• object-position: center：强制视频内容在容器内始终居中对齐，窄屏场景下不会出现单侧内容超出屏幕的问题

效果参考 #

宽屏显示效果：

窄屏显示效果：

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