视频(Video)

网页嵌视频有两种来源：HTML5 的 <video> 播放本地或流媒体文件，<iframe> 内嵌 YouTube、B 站等第三方平台的视频。两者在窄屏下都可能撑破布局或变形，本节分别给出自适应方案。

<video> 标签自适应

给 video 元素设置最大宽度，它就能随容器等比缩放：

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

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

效果：容器变窄时视频等比缩小，页面不出现横向滚动条；height:auto 保证宽高比不变形。

iframe 内嵌视频的难点

平台分享出的 iframe 通常带固定宽高（如 560×315）。只设 max-width:100% 能缩宽度，高度却固定，视频会变形或留下黑边。经典做法是“父容器按比例撑高 + iframe 绝对定位填满”：

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9：高度 = 宽度 × 9/16 */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

<div class="video-container">
  <iframe src="https://example.com/player/video/123"
          allowfullscreen></iframe>
</div>

效果：容器始终维持 16:9 比例，iframe 铺满其中，任何屏幕宽度下视频都不变形、不溢出。

aspect-ratio 现代写法

CSS 的 aspect-ratio 属性让上面的“padding 技巧”大幅简化：

.video-container {
    aspect-ratio: 16 / 9;  /* 直接声明宽高比 */
}
.video-container iframe {
    width: 100%; height: 100%;
}

父容器宽高比固定后，内部 iframe 用 100%×100% 填满即可。现代浏览器均已支持 aspect-ratio，新项目可以放心使用；老项目需要兼容旧浏览器时仍用 padding 技巧。

小结

视频自适应分两种情况：<video> 只需 max-width:100% 加 height:auto；iframe 则要借助 16:9 的固定比例容器（padding 技巧或 aspect-ratio）让视频随宽度等比缩放，从此告别小屏溢出与变形。