To do this, you need to add the amp-iframe extended component to your <head>:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
And then add an amp-iframe tag in your body. It must be at least 600px or 75% of the first viewport away from the top. The URL in the iframe has to be an https url and must not be on the same domain (or at least subdomain).
In order to add some magic and enable things such as pop-up functionality, you will have to add some values to the sandbox attribute of amp-iframe.
You may want to add
sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms".
This would allow you to include lead capture forms and pop-ups to your amp-html page.
Available values for the sandbox attribute (within HTML5):
|allow-forms||Re-enables form submission|
|allow-same-origin||Allows the iframe content to be treated as being from the same
|allow-top-navigation||Allows the iframe content to navigate its top-level browsing context|
Table Source: W3Schools
That’s it. The iframe is loaded asynchronously, but it should work as long as the project permits it.
Thanks to Conrad O’Connell for helping me prove this would actually work.
Update: It’s Google approved!
Right from Google's mouth regarding uses for amp-iframe in accelerate mobile pages… pic.twitter.com/JeDC7qfpEh
— Paul Shapiro (@fighto) February 26, 2016
— Adewale Oshineye (@ade_oshineye) August 4, 2016
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>. For more information, reference the documentation
— AMP Project (@AMPhtml) October 31, 2016