调整视频 iframe 的高度

Question

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

如何才能使未标记的 iframe 自动调整其高度以适应页面的宽度？

Answer 1

无法使用 CSS 来指定这一点，iframe 需要解析为绝对高度（并且iframe 的内容将调整为 iframe 的大小，而不是相反）。

但是，如果您要嵌入的内容相对可预测，因为您要嵌入的视频的宽高比是恒定的，则可以使用以下替代div方法iframe：

超文本标记语言

<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;
}

您将宽高比插入padding-bottom包装器 div 的属性中，并通过以下公式计算：video_height / video_width * 100。例如，纵横比为 16:9 的视频可为您提供9 / 16 * 100 = 56.25%.

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

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

希望这可以帮助！