代码之家 › 专栏 › 技术社区 › Nadine Fisch

如何将子iframe维度设置为父amp iframe维度?

amp-html iframe

Nadine Fisch · 技术社区 · 8 年前

我用amp-iframes替换了动态内容页面上的iframe元素。请看一下以下结构。我不知道iframe的大小,因为布局是响应性的,内容不是静态的:

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

AMP Iframe响应灵敏,工作正常。但我对iframe子元素(如嵌入式视频)有问题。由于子元素(iframe)未完全拉伸,因此到底部的距离为灰色。

我无法删除嵌入视频下方的冗余灰色空间。有人能帮我吗?

1 回复 | 直到 8 年前

Nadine Fisch 8 年前

我解决了。iframe中包括了JW播放器,纵横比为16:9。

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

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

推荐文章

mlsmet · 无法在Android手机上水平滚动表格

3 年前

lord stock · 硒在iframe中引发与下拉菜单相互作用的非接触元素异常

3 年前

ironmantis7x · 我无法使用html更改iframe中文本的文本颜色

3 年前

GÊá´á´á´ÊCá´á´ · 如何预加载或检测CDN承载的视频何时加载到盖茨比的折叠上方?

3 年前

ControlAltDel · 从iframe中加载的html页面上的源脚本获取Javascript变量

3 年前

Soniya Joshi · Android如何在Android iframe webview中传递url?

7 年前

Hellpless · 根据iframe-Google自动播放策略中的allow=“Autoplay”属性激活自动播放

7 年前

rosu alin · Vimeo视频不会在iframe中的chrome上启动。未调用LoadProgress

7 年前

Mahsa · 如何在javascript中获取iframe中链接的坐标

7 年前

Dixon Chaudhary · 在Laravel中维护会话和身份验证

7 年前