实现响应式视频播放器的关键是保持宽高比，首先使用max-width: 100%和height: auto确保视频不溢出；接着推荐用容器通过padding-bottom: 56.25%（16:9比例）创建自适应空间，结合绝对定位使视频始终填满容器且不变形，最后可添加背景图提升加载体验。

要实现一个响应式视频播放器并保持正确的宽高比，关键是让视频容器随屏幕尺寸缩放，同时不破坏原始比例。使用 max-width: 100% 和 height: auto 是最基础且有效的方法。

1. 基础HTML结构

视频通常通过 标签嵌入页面。确保设置 controls 属性以显示播放控制条。

<div class="video-container">
  <video controls>
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
  </video>
</div>

2. 使用 max-width 和 height: auto

为 元素设置最大宽度为父容器的100%，并让高度自动调整，可防止溢出并维持比例。

.video-container video {
  max-width: 100%;
  height: auto;
}

这样无论屏幕多小，视频都不会超出容器，同时保持原始宽高比。

立即学习“前端免费学习笔记（深入）”；

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

3. 使用容器包裹保持比例（推荐）

更稳健的做法是用一个容器来锁定宽高比，比如 16:9。利用 padding-bottom 技巧创建自适应空间。

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; / 16:9 宽高比 (9 ÷ 16 = 0.5625)
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这种方法确保视频在任何设备上都按比例显示，避免拉伸或留白。

4. 可选：添加背景图或占位符

在视频加载前，可通过设置容器背景提供视觉提示。

.video-container {
  background: url('placeholder.jpg') no-repeat center center;
  background-size: cover;
}

基本上就这些。通过合理使用 max-width: 100%、height: auto 和等比容器，就能轻松实现一个适配所有设备的响应式视频播放器。不复杂但容易忽略细节。