如何设置视频铺满页面宽度且高度为页面20%及以下

要让视频作为横幅仅占页面20%高度（或更小），同时避免拉伸变形、保证展示效果，你可以按以下方式修改代码：

video {
  width: 100%; /* 让横幅铺满页面宽度，如需固定宽度可改为50% */
  height: 20vh; /* 高度设为视口高度的20%，可按需调整为15vh（更小）或25vh（四分之一） */
  object-fit: cover; /* 保持视频原有比例，裁剪超出容器的部分，避免拉伸 */
  display: block;
  margin: 0 auto; /* 水平居中，不需要可删除 */
}

对应的HTML修正闭合标签并补充必要属性（保证自动播放正常）：

<video src="https://www.shutterstock.com/shutterstock/videos/16719199/preview/stock-footage-old-retro-video-game-arcade-clouds-moving-on-a-blue-sky-and-grass.webm" autoplay loop muted playsinline></video>

关键属性说明： #

• height: 20vh：vh是视口高度单位，直接对应浏览器窗口高度的百分比，数值可灵活调整。
• object-fit: cover：核心属性，解决强制设置高度导致的视频拉伸问题，让视频按比例填充容器。
• muted + playsinline：现代浏览器要求自动播放的视频必须静音，playsinline避免移动端自动全屏播放。

修改后视频会以横幅形式展示在页面顶部，下方可正常添加导航栏等其他内容。

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