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

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

  •  1
  • 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)未完全拉伸,因此到底部的距离为灰色。

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

    1 回复  |  直到 8 年前
        1
  •  2
  •   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>