Amphtml: amp-iframe issue

Created on 22 Feb 2016  Â·  5Comments  Â·  Source: ampproject/amphtml

Hi,
Setting up iframes in the document body, AMP throw randomly an error with the content of the iframe:

<amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller): amp-iframe#AMP_13  Current position -1198. Min: 480Positioning rules don't apply for iframes that use `placeholder`.See https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md#iframe-with-placeholder for details.

We cannot understand this, because the iframe itself is more than 600px from the top of the document. And the current position show in the error message is just weird (-1198).
Why this error message is throw? Should we only put a placeholder?
Anyway, I think there is a problem in the position calculation…

Bug

Most helpful comment

But in that example the iframe is not 600px away from the top of the document. Providing a placeholder would fix your problem.

E.g. if you want to load a video player, use the video's poster image as the placeholder.

All 5 comments

Could you provide a URL that shows this problem? Maybe on jsbin.com?

Providing a placeholder is certainly recommended.

You can find an example here:
https://jsbin.com/qivipezija/1/edit?html,console,output

But in that example the iframe is not 600px away from the top of the document. Providing a placeholder would fix your problem.

E.g. if you want to load a video player, use the video's poster image as the placeholder.

I did it too fast, my bad.
You can find another one there:
https://jsbin.com/buhecemape/1/edit?html,console,output

I found how to reproduce the issue, it occurs when I reload the document after scrolling to the iframe. The browser keeps the scoll position when reloading content.

This is caused by

html, body {
  height: 100%;
}

You can fix your doc by removing that rule and we will keep this open to make sure AMP is robust against this case.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aghassemi picture aghassemi  Â·  3Comments

aghassemi picture aghassemi  Â·  3Comments

westonruter picture westonruter  Â·  3Comments

radiovisual picture radiovisual  Â·  3Comments

Download picture Download  Â·  3Comments