Search code examples
javascripthtmliframeamp-htmlamp-ad

How to create amp-embed that adjusts its height according to the content?

This is similar to this question, but I need to dynamically adjust the height of an amp-embed rather than an amp-frame.

how create AMP iframe adjusts its height according to the content

This page gives clear examples of how to adjust the height of an amp-frame:

https://amp.dev/documentation/examples/components/amp-iframe/

When I do the same thing for an amp-embed, unfortunately it doesn't work and I haven't found similar instructions for an amp-embed or an amp-ad.

Here is the amp-frame:

<amp-iframe
  width="300"
  height="10"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin"
  resizable
  frameborder="0"
  src="http://localhost/loader.html"
>
  <div overflow></div>
</amp-iframe>

And in the loader.html file, after the content is loaded, I make this call:

window.parent.postMessage({sentinel: 'amp', type: 'embed-size', height: document.body.scrollHeight},'*');
Solution

  • amp-embed and amp-ad can be resized using the requestResize API call. Here is more information:

    Ads can call the special API window.context.requestResize(width, height, opt_hasOverflow) to send a resize request.

    Once the request is processed the AMP runtime will try to accommodate this request as soon as possible, but it will take into account where the reader is currently reading, whether the scrolling is ongoing and any other UX or performance factors.

    https://github.com/ampproject/amphtml/blob/main/ads/README.md#ad-resizing