如何将子 iframe 尺寸设置为父 amp-iframe 尺寸？

Posted 2023-05-09

【中文标题】如何将子 iframe 尺寸设置为父 amp-iframe 尺寸？

【英文标题】：How to set child iframe dimension to parent amp-iframe dimensions?

【发布时间】：2018-04-19 23:19:45

【问题描述】：

我将动态内容页面上的 iframe 元素替换为 amp-iframe。请看下面的结构。我不知道 iframe 的大小，因为布局是响应式的并且内容不是静态的：

<amp-iframe width=300 height=200
     layout="responsive"
     sandbox="allow-scripts allow-same-origin"
     class="unknown-size">
    <amp-img class="unknown-size"   layout="responsive" 
src="/images/logo.png" placeholder>
</amp-iframe>

AMP-Iframe 响应迅速，工作正常。但我对 iframe 子元素（如嵌入视频）有疑问。到底部有一个丑陋的灰色距离，因为子元素（iframe）没有完全拉伸。

我无法删除嵌入视频下方的多余灰色空间。谁能帮帮我？

【参考方案1】：

我解决了。在 iframe 中，我加入了 JW Player，其纵横比为 16:9。

我将这些值添加到我的 amp-iframe 中的高度和宽度属性，现在它可以正常工作了

<amp-iframe width=16 height=9
 layout="responsive"
 sandbox="allow-scripts allow-same-origin">
<amp-img class="unknown-size"   layout="responsive" src="/images/logo.png" placeholder>
</amp-iframe>

【讨论】：

这个网站给了我重要的提示jwplayer.com/blog/jwplayer-amp-component