Include iframes
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
You can display an iframe in your page by 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.
Requirements for amp-iframe
- Must be at least 600px or 75% of the first viewport away from the top (except for iframes that use a
placeholder). - 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.
amp-iframe. 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
In the following example, we created a responsive amp-iframe to embed a Google Map via the Google Maps Embed API:
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe">
</amp-iframe>
Using placeholders
You can display an amp-iframe at the top of a document, provided the amp-iframe contains an element with the placeholder attribute, (for example, an amp-img element) which would be rendered as a placeholder until the iframe is ready to be displayed.
Example with placeholder:
<amp-iframe width="400" height="225"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
src="https://giphy.com/embed/OWabwoEn7ezug">
<amp-img placeholder layout="fill"
src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"></amp-img>
</amp-iframe>
Renders as:
Examples
You can find more advanced amp-iframe examples in AMP By Example.