Iframely embeds for AMP Framework
The Accelerated Mobile Pages ((AMP) Project is a Google initiative that lets publishers create mobile-optimized content. Google serves AMP view of the articles from their CDN when mobile users search for news.
To accomplish this, AMP includes Iframely-specific component —
<amp-iframely>. If you’d like, however, we can also provide a markup for a hosted
<amp-iframe>, or for supported publisher-specific AMP components such as
<amp-tiktok> and the like.
See it in action
Here’s a quick demo. Enter some example URLs (one per line) and hit the button to generate a sample AMP article with that rich media components:
How to get embeds for AMP
To get an AMP-compatible component, send
&=1 as a query string parameter with your API call. The
html field of API response will include an
<amp- component if any.
Like regular API calls, output HTML can either point to a (specially optimized) Iframely iFrame or publisher AMP component for supported providers.
&iframe=1parameter to your call to always get an Iframely-hosted component.
Iframely iFrame- powered components
&=1parameter defaults to
<amp-iframely>component (see pull quote below for legacy support).
- You may also call
&=iframelyto explicitely request all Iframely iFrames be returned as
<amp-iframe>instead when we need to generated hosted code.
Earlier API version defaulted to
&=1parameter. Legacy customers will keep getting
&=1requests. To migrate, start sending
&=iframely, or uncheck that feature flag in your Iframes settings.
Provider-specific AMP components
Alternatively, if you do not wish to rely on
<amp-iframely>, our APIs can also generate the following publisher-specific components supported by AMP. Unfortunatelly, AMP support is limited only to these publishers:
<amp-iframely> include this script in the
head of your page:
<script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-0.1.js"></script>
Similarly, you may also add the required CSS for AMP Bento components.
Avoid placing some media close to the top
Resizable AMP components cannot appear close to the top of the document except when iFrame also uses an image placeholder. It 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 etc. below 600px from the top of your page or 75% of the user’s viewport.