CODEWITHSUNDEEP
htmliframeamp-html
Tushar Kumawat
Tushar Kumawat

Reputation: 661

Showing error When I add map iframe in AMP page

Showing error in amp page

But I have added
tag till 600px height than it's working fine.

error.js:195 <amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller):  <amp-iframe width=​"600" height=​"400" title=​"Google map pin on Googleplex, Mountain View CA" layout=​"responsive" sandbox=​"allow-scripts allow-same-origin allow-popups" frameborder=​"0" src=​"https:​/​/​www.google.com/​maps/​embed/​v1/​place?q=place_id:​ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyC544Fo4Prg6ZUNNfmi8cC5Rhs4ZckTGSw" class=​"i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-error i-amphtml-layout" i-amphtml-layout=​"responsive">​…​</amp-iframe>​ Current position 195 . Min: 480 Positioning 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.

Upvotes: 4

Views: 1590

Answers (1)

Vinit Desai
Vinit Desai

Reputation: 520

According to AMP documentation, amp-iframe has several important details that are designed to make it more secure and avoid AMP files that are dominated by a single iframe:

  • An amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below). The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.
  • By default, an amp-iframe is sandboxed (see details). An amp-iframe must only request resources via HTTPS, from a data-URI, or via the srcdoc attribute.
  • An amp-iframe must not be in the same origin as the container unless they do not allow allow-same-origin in the sandbox attribute. See the "Iframe origin policy" doc for further details on allowed origins for iframes. More details can be found https://amp.dev/documentation/components/amp-iframe/

Upvotes: 2

Related Questions