There are 2 possible options for embedding Tweets into an AMP article. First, is to use the amp-iframe component which references a isolated HTML page that renders an embedded Tweet. The second is to use the amp-twitter component. The use of amp-twitter is recommended because it elliminates some complexity from implementation. Tweets have dynamic heights based on content, width, configuration, etc., and the 3rd party JavaScript managing the injections of these Tweets handles these dynamic heights. The problem with using amp-iframe is that the 3rd party JavaScript no longer has access to the top-level window and therefore can't properly resize elements based on these heights. So this requires that the consumer of the amp-iframe component follow some steps in order to handle the dynamic height:
- Use the
resizableattribute - Include an
overflowchild element - Use
window.parent.postMessageto notify the parent context of height changes from the child iframe
// Example
window.parent.postMessage(
{
sentinel: 'amp',
type: 'embed-size',
height: document.body.scrollHeight,
},
'*'
);amp-twitter, on the other hand, manages these dyanamic pieces of state for you. So unless there is a custom reason that isn't supported by the amp-twitter component, it that is the recommneded appraoch.