Embeds for AMP Framework

The Accelerated Mobile Pages (AMP) Project is an open-source initiative that lets publishers create mobile optimized content. Google serves AMP view of the articles off their CDN when mobile users search for news.

The AMP framework requires embeds to be in its own HTML markup and also to handle specific JavaScript events flow. Iframely supports both the markup and resize events.

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 supply specially formatted, SSL- and mobile-friendly, lazy-loaded iFrame helper that is optimized for for amp-iframe component and fits AMP natively.

To include that iFrame, 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 we know will not work in AMP sandbox (say, Flash video) will fall back to a card preview.

See it in action

Enter some test URLs (one per line) and hit the button to generate a sample AMP article with those embeds:

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 some iFrames close to the top

Resizable AMP iFrame cannot appear close to the top of the document except when iFrame also uses image placeholder. This includes Twitter, Instagram and other script-based rich media.

Iframely will put a required image placeholder on all responsive and resizable embeds to make iFrames work anywhere on the AMP page. However, AMP may ignore a resize request when an embed is already in the viewport.

Therefore, we recommend placing Twitter, Instagram and the like below 600px from the top of your page or 75% of user's viewport.

Special case: Facebook embeds

As of June 2018, Facebook is using outdated origin approach and their embeds do not work in sandboxed iFrames that AMP requires.

To make Facebook embeds work, you will need to add required JavaScript of amp-facebook extension to your page. Iframely will output valid AMP HTML for Facebook URLs, but they will only work when you also have the amp-facebook extension on the page.

Previous article: What URLs to send
Next article: Instant Articles