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

ericlindley-g picture ericlindley-g  Â·  60Comments

jpettitt picture jpettitt  Â·  42Comments

jpettitt picture jpettitt  Â·  42Comments

choumx picture choumx  Â·  50Comments

choumx picture choumx  Â·  42Comments