使用 CSS aspect-ratio 特性使 iframe 响应式缩放

iframe 响应式问题

与 img 和原生 HTML5 video 元素不同，iframe 默认情况下不会响应式缩放。

/**
 * 这行不通
 */
iframe {
  max-width: 100%;
  height: auto;
}

解决此问题的旧方法

从历史上看，要使 iframe 具有响应性，需要将 iframe 包装在 div 容器中。

<div class="responsive-iframe">
  <iframe
    src="/path/to/file"
    width="640"
    height="360"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

然后，您可以使用 CSS

• 将 iframe 放在 div 的左上角。
• 使其达到 div 元素 height 和 width 的 100%。
• 在 div 顶部添加等于