如何在网站中实现HTML <video>标签视频的响应式适配？

适配背景视频（对应你当前fixed定位场景） #

你现有代码的问题是仅设置最小宽高100%，在移动端不同屏幕比例下会出现视频变形、内容裁切溢出的问题，同时iOS Safari默认会强制视频全屏播放，无法内联展示。

调整后完整代码 #

<!-- 记得在head里加视口meta标签，保证移动端尺寸识别正常 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<video autoplay muted loop playsinline id="myVideo">
  <source src="rick.mp4" type="video/mp4">
</video>

<style>
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* 等比例缩放覆盖整个屏幕，多余部分裁切无变形 */
  object-fit: cover;
  /* 放在最底层当背景 */
  z-index: -1;
}
</style>

关键调整说明 #

• 新增playsinline属性：解决iOS Safari默认强制视频全屏播放的问题，实现内联正常展示
• 新增object-fit: cover属性：保证视频等比例缩放，完全覆盖屏幕区域不会变形，多余边缘自动裁切；如果需要完整展示视频所有内容不裁切，可替换为object-fit: contain，屏幕剩余区域会自动留空
• 替换min-width/min-height为width/height 100%：适配所有设备的屏幕尺寸，不会出现溢出

普通文档流内响应式视频方案 #

如果不需要固定定位做背景，只是要视频随页面宽度自适应，固定比例不变形，可以用比例容器方案：

<div class="video-wrapper">
  <video controls>
    <source src="rick.mp4" type="video/mp4">
  </video>
</div>

<style>
.video-wrapper {
  width: 100%;
  /* 16:9比例对应56.25%，4:3比例对应75%，可根据视频实际比例调整 */
  padding-top: 56.25%;
  position: relative;
}
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

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