Google AMP is: ``` The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere. ``` Basically Facebook's instant articles for everyone. AMP is relatively easy to set up and Embedly will work with the `amp-frame` out of the box. > 🚧 Positioning Restriction > > From the amp-frame [docs](https://www.ampproject.org/docs/guides/amp_replacements.html): > > ``` > `amp-iframe` may not appear close to the top of the document (except for iframes that use placeholder as described below). They must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller. > ``` > > So you should use the placeholder as described below. ## Getting Started There are two ways you can do this. You can either create the `amp-frame` from the oEmbed response or deconstruct the iframe if you already have it saved, we will provide JavaScript code to do both. At the end you want to turn: ```html ``` Into: ```html ', ``` ### From oEmbed The easiest way is to just build the `amp-frame` from the [oEmbed](doc:oembed) API. Here's an example using embedly-jquery: ```javascript var urls = [ 'https://www.youtube.com/watch?v=rVlhMGQgDkY', 'https://vine.co/v/irMdgU253HU', 'https://streamable.com/25ws', 'https://www.instagram.com/p/BA4-invoXXH/', 'http://vimeo.com/18150336' ]; $.embedly.oembed(urls) .then(function(results) { // Reduce the response to only video, rich or photo types and remove // link or error responses. return results.reduce(function(array, oembed) { var html; if (oembed.type === 'rich' || oembed.type === 'video') { // Use the amp-frame if it's a // We need to pull the src out of the iframe. var match = (/src=\"([^\"]+)\"/).exec(oembed.html); if (match.length === 2) { // Grab the src. var src = 'https://'+match[1]; // We should always have a placeholder, otherwise we need to worry about the // position of the iframe in relationship to the top of the page. If there // is no thumbnail_url then we should use a default placeholder. Please // add your own placeholder. var placeholder = oembed.thumbnail_url; if (!placeholder) { placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png'; } // Build the amp-frame. html = [ '', '', '' ].join(' '); } } else if (oembed.type === 'photo') { // Use the amp-img here. html = [ '' ].join(' '); } if (html) { array.push(html); } return array; }, []); }) .then(function(results){ // add the emebds. var $embeds = $('.embeds'); results.forEach(function(html){ $embeds.append([ '

', html, '

' ].join('')); }); }); ``` > 👍 Demo! > > The above code is used to create the this [demo](http://embedly.github.io/embedly-amp/embeds.html). You will see the embeds progressively load. You can see the full code [here](https://github.com/embedly/embedly-amp/blob/master/js/embeds.js). ### Replace Iframes If you have already saved off the iframe and do not have access to the oEmbed response, the Embedly iframe has everything you need to create the `amp-frame`. The code looks like: ```javascript var ampify = function(iframe){ var src = (/src=\"([^\"]+)\"/).exec(iframe)[1], width = (/width=\"([^\"]+)\"/).exec(iframe)[1], height = (/height=\"([^\"]+)\"/).exec(iframe)[1], path = src.split('?')[1]; // Embedly stores the URL of a thumbnail of embed in the SRC of the iframe. // This decomposes that query sting to a hash. var query = path.split('&').reduce(function(query, arg){ var parts = arg.split('=').map(decodeURIComponent); query[parts[0]] = parts[1]; return query; }, {}); // We should always use a placeholder. var placeholder = query.image; if (!placeholder){ placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png'; } return [ '', '', '' ].join(' '); }; // Basic use: var html = amplifiy(''); ``` > 👍 Demo > > The above code is used to create the this [demo](http://embedly.github.io/embedly-amp/replace.html). And you can see the full code [here](https://github.com/embedly/embedly-amp/blob/master/js/replace.js).