A M P | Responsive iframes

An example

Joost v@n Meeteren


Display an iframe

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

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.

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>

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=AIzaSyDG9YXIhK
    BhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,
    %20CA">
</amp-iframe>


A M P Sources

Accelerated Mobile Pages Project

GitHub ampproject/amphtml