Question

我使用TinyMCE作为我的WYSIWYG文本编辑器，因此iframe创建时没有标签。我在网上的解决方案都使用jQuery来调整带有特定标签的iframe，但是如何调整页面上的所有iframe呢？我已经尝试使用CSS width: 100%并且它可以正常工作，但是当我添加height: auto时，它不会相应地调整。

我怎样才能使未标记的iframe自动调整其高度到页面的宽度？

Answer 1

无法使用CSS指定此内容，iframe需要解析为绝对高度（ iframe的内容将调整为iframe的大小，而不是其他方式）。

但是，如果您要嵌入的内容相对可预测，那么您嵌入的视频的宽高比是不变的，可以使用包装器div作为替代方案。超过iframe：

<强> HTML

<div class='video-wrapper'>
  <iframe ...></iframe>
</div>

<强> CSS

.video-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

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

您在包装器div的padding-bottom属性中插入宽高比，它由公式video_height / video_width * 100计算。例如，宽高比为16：9的视频会为您提供9 / 16 * 100 = 56.25%。

现在，棘手的部分是在TinyMCE中获取包装器<div>，除非编辑底层HTML，否则这可能是不可能的。另一种方法是使用jQuery将所有iframe包装在divs中：

$('iframe').wrap('<div class="video-wrapper"></div>');

希望这有帮助！

调整视频iframe的高度

1 个答案: