我使用 TinyMCE 作为我的 WYSIWYG 文本编辑器,因此创建的 iframe 没有标签。我网上的解决方案都是使用jQuery调整带有特定标签的iframe,但是如何调整页面上的所有iframe?我已经尝试将 CSS 用于 width: 100%
并且它工作正常,但是当我添加 height: auto
时它不会相应地调整。
如何使未标记的 iframe 自动调整其高度以适应页面的宽度?
最佳答案
没有办法用 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;
}
您在 padding-bottom
中插入纵横比包装器 div 的属性,它由以下公式计算:video_height / video_width * 100
.例如,宽高比为 16:9 的视频显示 9 / 16 * 100 = 56.25%
.
现在,棘手的部分是获取包装器 <div>
在 TinyMCE 中,除非编辑底层 HTML,否则这可能是不可能的。另一种方法是使用 jQuery 将所有 iframe 包装在 div 中:
$('iframe').wrap('<div class="video-wrapper"></div>');
希望这对您有所帮助!
关于javascript - 调整视频iframe的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41024915/