Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.
Display an iframe in your page using the
- 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
amp-iframe from the
<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>
More advanced examples can be found in our advanced demo page, which is embedded