Embeds for AMP Framework
The Accelerated Mobile Pages (AMP) Project is an open source initiative that lets publishers create mobile optimized content.
How to get embeds for AMP
To get AMP-compatible embeds, simply send
&iframe=amp as query string parameter with your API call. Iframely will do the rest of processing in the background.
The result HTML will produce a SSL- and mobile-friendly, lazy-loaded smart iFrame that is optimized for for
amp-iframe component and fits natively into AMP page.
To make it render, you need to add amp-iframe component to the
head of your page:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"> </script>
Embeds that can not be converted into AMP format (for example, Flash-only embeds) will fall back to summary card.
See it in action
Enter some test URLs (one per line) and hit the button to generate a sample AMP article with those embeds on it.
Known issue: Please disable Flash in your browser if you see a playback problem. It properly emulates a mobile environment. Some publishers, say, Dailymotion would give preference to Flash over HTML5 players if it is available, but Flash is not allowed in sandboxed iFrames that AMP uses.
Avoid placing iFrames close to the top of the page
AMP iFrame can not appear close to the top of the document (except for iFrames that use image placeholder). Embeds can appear either 600px from the top or after 75% of the initial viewport (when scrolled to the top).
For most responsive iFrames, Iframely will put a required image placeholder to make iFrames work anywhere on the AMP page. However, many script based embeds such as Twitter, Instagram and others will need to be carefully put below 600px.
Special case: Facebook embeds
As of March 2016, Facebook is using outdated origin approach and their embeds do not work in sandboxed iFrames that AMP requires.
amp-facebook extension on the page.