响应式多媒体嵌入

响应式多媒体嵌入使视频、iframe等内容能够自适应容器宽度，保持正确的宽高比。

核心技术方案

宽高比容器法

HTML

<!-- 16:9 视频容器 -->
<div class="video-wrapper">
  <iframe src="..." allowfullscreen></iframe>
</div>

<style>
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

常用宽高比

比例	padding-bottom	用途
16:9	56.25%	视频播放器
4:3	75%	传统视频
21:9	42.86%	电影宽屏
1:1	100%	正方形内容

响应式视频

HTML5 video 自适应

HTML

<video controls width="100%" style="max-width: 100%;">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<style>
video {
  width: 100%;
  height: auto;
  max-width: 100%;
}
</style>

内嵌视频容器

HTML

<div class="embed-container">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

<style>
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

CSS aspect-ratio 属性

现代方案

HTML

<div class="responsive-media">
  <iframe src="..."></iframe>
</div>

<style>
.responsive-media {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.responsive-media iframe {
  width: 100%;
  height: 100%;
}
</style>

浏览器兼容

CSS

/* 渐进增强 */
.responsive-media {
  /* Fallback */
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

/* 现代浏览器 */
@supports (aspect-ratio: 16 / 9) {
  .responsive-media {
    aspect-ratio: 16 / 9;
    padding-bottom: 0;
    height: auto;
  }
}

响应式图片与多媒体组合

picture 元素

HTML

<picture>
  <source media="(min-width: 1200px)" srcset="hero-desktop.webp">
  <source media="(min-width: 768px)" srcset="hero-tablet.webp">
  <img src="hero-mobile.webp" alt="响应式图片" loading="lazy">
</picture>

艺术方向视频

HTML

<video controls>
  <source src="desktop.mp4" media="(min-width: 1024px)">
  <source src="mobile.mp4" media="(max-width: 1023px)">
</video>

注意：aspect-ratio 属性不支持 IE 和旧版 Edge，需使用 padding-bottom 方案作为后备。

要点总结

使用 padding-bottom 百分比实现宽高比容器
现代浏览器可使用 aspect-ratio CSS 属性
视频 iframe 使用绝对定位填满容器
常用 16:9 比例对应 padding-bottom: 56.25%
提供兼容性后备方案

📝 发现内容有误？点击此处直接编辑