Responsive IFRAMEs

The CSS

父<；span>有一组有趣的CSS：

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

填充顶部是有趣的部分；将填充顶部设置为高度9/宽度16的百分比可以使我们保持理想的比率。此比率与YouTube的高度与宽度比率相匹配，但您可以使用任何比率来匹配您的IFRAME使用比率。

接下来定义IFRAME的CSS：

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

IFRAME的CSS并不引人注目，因为<；span>完成了大部分工作；将IFRAME定位为绝对，并将其宽度和高度设置为100%将元素约束为DIV的反应维度。

上面的CSS就是将一个有问题的静态IFRAME变成一个像图像一样容易操作的反应元素所需要的一切。感谢Gregory Gan的精彩帖子和提示！