Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

The basics

Display an iframe in your page using the amp-iframe element.

Iframes are especially useful in AMP to display content not supported in the main page context, such as content requiring user-authored JavaScript.

amp-iframe requirements:

  • Must be at least 600px or 75% of the first viewport away from the top.
  • Can only request resources via HTTPS, and they must not be in the same origin as the container, unless they do not specify allow-same-origin.

Include the script

To include an amp-iframe in your page, first include the following script to the <head>, which loads the additional code for the extended component:

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Write the markup

An example amp-iframe from the released.amp example:

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Examples

More advanced examples can be found in our advanced demo page, which is embedded as <amp-iframe> below: