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
You can add forms and other elements to an amp-html page that aren't supposed to be permitted by using the amp-iframe component. Google has said this acceptable usage.