Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.
You can display an iframe in your page by using the
- Must be at least 600px or 75% of the first viewport away from the top (except for iframes that use a
- 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
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=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=europe"> </amp-iframe>
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>
You can find more advanced amp-iframe examples in AMP By Example.