RWD 视频

响应式网页设计：处理视频

学习如何使嵌入式视频流畅地适应不同的屏幕尺寸。

使用 max-width 进行基本缩放

使视频（和图像）具有响应性的一个简单有效的方法是将其 max-width 设置为 100%，height 设置为 auto。这样，如果其容器变得比视频的固有宽度窄，视频就会按比例缩小，但不会比其原始大小更大。

video, iframe {
  max-width: 100%;
  height: auto;
}

为什么使用 max-width: 100% 而不是 width: 100%？ 使用 width: 100% 会强制视频始终填满容器的宽度，如果容器宽于视频的固有宽度，这可能导致像素化。max-width: 100% 确保视频能够良好地缩小，但同时尊重其原始最大尺寸。

保持宽高比

尽管 max-width: 100% 效果不错，但有时嵌入式视频（特别是来自 <iframe> 元素如 YouTube 嵌入的视频）可能无法固有地正确保持其宽高比，这可能导致黑边（信箱效应）或内容失真。

一种常见的现代技术是使用 aspect-ratio CSS 属性：

/* 如有可能，直接应用于视频或 iframe */
.responsive-video {
  width: 100%; /* Fill the container */
  max-width: 100%; /* Don't exceed container */
  height: auto; /* Let height adjust */
  aspect-ratio: 16 / 9; /* Common widescreen ratio */
}

为了更广泛的兼容性或更复杂的场景（例如控制包含绝对定位的 iframe 的容器的宽高比），通常使用经典的“padding-top”技巧：

/* 1. 创建一个容器 */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 (9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
}

/* 2. 在其中使用绝对定位放置 iframe/视频 */
.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

解释：容器的 height 设置为 0，但 padding-top（作为 宽度 的百分比）创建了保持宽高比所需的垂直空间。然后，视频/iframe 会被拉伸以填满这个容器。

在支持的情况下，选择 aspect-ratio 属性以简化操作；对于旧版浏览器或特定的容器需求，可以使用 padding 技巧。

添加一个响应式视频示例

让我们使用 aspect-ratio 属性将响应式视频集成到示例布局中：

HTML：
```html
<div class="video-wrapper">
  <iframe
    class="responsive-video"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/your_video_id"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

CSS：

.video-wrapper {
  max-width: 720px; /* 可选：限制最大尺寸 */
  margin: 2em auto; /* 容器居中 */
}

.responsive-video {
  display: block; /* 移除 iframe 下方的额外空间 */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none; /* 移除 iframe 的默认边框 */
}

此设置确保了 YouTube 视频在其容器内正确缩放，同时保持其 16:9 的宽高比。