{"__v":1,"_id":"56d088977c2e100b000af8f0","category":{"__v":8,"_id":"5666dac5d784a70d00397bcb","pages":["5666dda06819320d000c2e19","567856b9e5da8d0d00591c66","567861b8e5da8d0d00591c7c","568bdbf9e3e30f0d0021e07c","568be56983d2061900d86ce9","5697f7a60b09a41900b245d7","56abb8b49327b30d00f7c234","56d088977c2e100b000af8f0"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-08T13:27:33.662Z","from_sync":false,"order":5,"slug":"tutorials","title":"Tutorials"},"parentDoc":null,"project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4","version":{"__v":10,"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-02-26T17:17:11.997Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"Google AMP is:\n\n    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.\n\nBasically 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. \n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Positioning Restriction\",\n  \"body\": \"From the amp-frame [docs](https://www.ampproject.org/docs/guides/amp_replacements.html):\\n\\n    `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.\\n    \\nSo you should use the placeholder as described below.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Getting Started\"\n}\n[/block]\nThere 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. \n\nAt the end you want to turn:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe class=\\\"embedly-embed\\\" \\n\\twidth=\\\"500\\\"\\n  height=\\\"281\\\"\\n  frameborder=\\\"0\\\"\\n\\tsrc=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo\\\" \\n  scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nInto:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<amp-iframe width=500 height=281\\n    sandbox=\\\"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\\\"\\n    layout=\\\"responsive\\\"\\n    frameborder=\\\"0\\\"\\n    src=\\\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo\\\">\\n  <amp-img layout=\\\"fill\\\" src=\\\"https://i.vimeocdn.com/video/117311910_1280.jpg\\\" placeholder></amp-img>',\\n</amp-iframe>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n### From oEmbed\n\nThe easiest way is to just build the `amp-frame` from the [oEmbed](doc:oembed) API. Here's an example using embedly-jquery:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var urls = [\\n  'https://www.youtube.com/watch?v=rVlhMGQgDkY',\\n  'https://vine.co/v/irMdgU253HU',\\n  'https://streamable.com/25ws',\\n  'https://www.instagram.com/p/BA4-invoXXH/',\\n  'http://vimeo.com/18150336'\\n ];\\n\\n$.embedly.oembed(urls)\\n  .then(function(results) {\\n    // Reduce the response to only video, rich or photo types and remove\\n    // link or error responses.\\n    return results.reduce(function(array, oembed) {\\n      var html;\\n      if (oembed.type === 'rich' || oembed.type === 'video') {\\n        // Use the amp-frame if it's a\\n\\n        // We need to pull the src out of the iframe.\\n        var match = (/src=\\\\\\\"([^\\\\\\\"]+)\\\\\\\"/).exec(oembed.html);\\n\\n        if (match.length === 2) {\\n          // Grab the src.\\n          var src = 'https://'+match[1];\\n\\n          // We should always have a placeholder, otherwise we need to worry about the\\n          // position of the iframe in relationship to the top of the page. If there\\n          // is no thumbnail_url then we should use a default placeholder. Please\\n          // add your own placeholder.\\n          var placeholder = oembed.thumbnail_url;\\n          if (!placeholder) {\\n            placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';\\n          }\\n\\n          // Build the amp-frame.\\n          html = [\\n            '<amp-iframe width=' + oembed.width,\\n            'height=' + oembed.height,\\n            'layout=\\\"responsive\\\"',\\n            'frameborder=\\\"0\\\"',\\n            'sandbox=\\\"allow-scripts allow-same-origin allow-popups\\\"',\\n            'src=\\\"' + src + '\\\">',\\n            '<amp-img layout=\\\"fill\\\" src=\\\"' + placeholder + '\\\" placeholder></amp-img>',\\n            '</amp-iframe>'\\n          ].join(' ');\\n        }\\n      } else if (oembed.type === 'photo') {\\n        // Use the amp-img here.\\n\\n        html = [\\n          '<amp-img src=\\\"' + oembed.url + '\\\"',\\n          'width=' + oembed.width,\\n          'height=' + oembed.height,\\n          'layout=\\\"responsive\\\" ></amp-img>'\\n        ].join(' ');\\n      }\\n\\n      if (html) {\\n        array.push(html);\\n      }\\n      return array;\\n    }, []);\\n  })\\n  .then(function(results){\\n    // add the emebds.\\n  \\tvar $embeds = $('.embeds');\\n    results.forEach(function(html){\\n    \\t$embeds.append([\\n      \\t'<div class=\\\"embed\\\">',\\n        \\thtml,\\n        '</div>'\\n      ].join(''));\\n    });\\n  });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Demo!\",\n  \"body\": \"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).\"\n}\n[/block]\n### Replace Iframes\n\nIf 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var ampify = function(iframe){\\n  var src = (/src=\\\\\\\"([^\\\\\\\"]+)\\\\\\\"/).exec(iframe)[1],\\n    width = (/width=\\\\\\\"([^\\\\\\\"]+)\\\\\\\"/).exec(iframe)[1],\\n    height = (/height=\\\\\\\"([^\\\\\\\"]+)\\\\\\\"/).exec(iframe)[1],\\n    path = src.split('?')[1];\\n\\n  // Embedly stores the URL of a thumbnail of embed in the SRC of the iframe.\\n  // This decomposes that query sting to a hash.\\n  var query = path.split('&').reduce(function(query, arg){\\n    var parts = arg.split('=').map(decodeURIComponent);\\n    query[parts[0]] = parts[1];\\n    return query;\\n  }, {});\\n\\n  // We should always use a placeholder.\\n  var placeholder = query.image;\\n  if (!placeholder){\\n    placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';\\n  }\\n\\n  return [\\n    '<amp-iframe width=' + width,\\n    'height=' + height,\\n    'layout=\\\"responsive\\\"',\\n    'frameborder=\\\"0\\\"',\\n    'sandbox=\\\"allow-scripts allow-same-origin allow-popups\\\"',\\n    'src=\\\"https:' + src + '\\\">',\\n    '<amp-img layout=\\\"fill\\\" src=\\\"' + placeholder + '\\\" placeholder></amp-img>',\\n    '</amp-iframe>'\\n  ].join(' ');\\n};\\n\\n// Basic use:\\nvar html = amplifiy('<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo\\\" width=\\\"500\\\" height=\\\"281\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>');\\n\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Demo\",\n  \"body\": \"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).\"\n}\n[/block]","excerpt":"Embedding Videos and Rich media using Embedly and Google AMP.","slug":"embedding-with-google-amp","type":"basic","title":"Embedding with Google AMP"}

Embedding with Google AMP

Embedding Videos and Rich media using Embedly and Google AMP.

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. [block:callout] { "type": "warning", "title": "Positioning Restriction", "body": "From the amp-frame [docs](https://www.ampproject.org/docs/guides/amp_replacements.html):\n\n `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.\n \nSo you should use the placeholder as described below." } [/block] [block:api-header] { "type": "basic", "title": "Getting Started" } [/block] 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: [block:code] { "codes": [ { "code": "<iframe class=\"embedly-embed\" \n\twidth=\"500\"\n height=\"281\"\n frameborder=\"0\"\n\tsrc=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo\" \n scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "language": "html" } ] } [/block] Into: [block:code] { "codes": [ { "code": "<amp-iframe width=500 height=281\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n layout=\"responsive\"\n frameborder=\"0\"\n src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo\">\n <amp-img layout=\"fill\" src=\"https://i.vimeocdn.com/video/117311910_1280.jpg\" placeholder></amp-img>',\n</amp-iframe>", "language": "html" } ] } [/block] ### 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: [block:code] { "codes": [ { "code": "var urls = [\n 'https://www.youtube.com/watch?v=rVlhMGQgDkY',\n 'https://vine.co/v/irMdgU253HU',\n 'https://streamable.com/25ws',\n 'https://www.instagram.com/p/BA4-invoXXH/',\n 'http://vimeo.com/18150336'\n ];\n\n$.embedly.oembed(urls)\n .then(function(results) {\n // Reduce the response to only video, rich or photo types and remove\n // link or error responses.\n return results.reduce(function(array, oembed) {\n var html;\n if (oembed.type === 'rich' || oembed.type === 'video') {\n // Use the amp-frame if it's a\n\n // We need to pull the src out of the iframe.\n var match = (/src=\\\"([^\\\"]+)\\\"/).exec(oembed.html);\n\n if (match.length === 2) {\n // Grab the src.\n var src = 'https://'+match[1];\n\n // We should always have a placeholder, otherwise we need to worry about the\n // position of the iframe in relationship to the top of the page. If there\n // is no thumbnail_url then we should use a default placeholder. Please\n // add your own placeholder.\n var placeholder = oembed.thumbnail_url;\n if (!placeholder) {\n placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';\n }\n\n // Build the amp-frame.\n html = [\n '<amp-iframe width=' + oembed.width,\n 'height=' + oembed.height,\n 'layout=\"responsive\"',\n 'frameborder=\"0\"',\n 'sandbox=\"allow-scripts allow-same-origin allow-popups\"',\n 'src=\"' + src + '\">',\n '<amp-img layout=\"fill\" src=\"' + placeholder + '\" placeholder></amp-img>',\n '</amp-iframe>'\n ].join(' ');\n }\n } else if (oembed.type === 'photo') {\n // Use the amp-img here.\n\n html = [\n '<amp-img src=\"' + oembed.url + '\"',\n 'width=' + oembed.width,\n 'height=' + oembed.height,\n 'layout=\"responsive\" ></amp-img>'\n ].join(' ');\n }\n\n if (html) {\n array.push(html);\n }\n return array;\n }, []);\n })\n .then(function(results){\n // add the emebds.\n \tvar $embeds = $('.embeds');\n results.forEach(function(html){\n \t$embeds.append([\n \t'<div class=\"embed\">',\n \thtml,\n '</div>'\n ].join(''));\n });\n });", "language": "javascript" } ] } [/block] [block:callout] { "type": "success", "title": "Demo!", "body": "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)." } [/block] ### 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: [block:code] { "codes": [ { "code": "var ampify = function(iframe){\n var src = (/src=\\\"([^\\\"]+)\\\"/).exec(iframe)[1],\n width = (/width=\\\"([^\\\"]+)\\\"/).exec(iframe)[1],\n height = (/height=\\\"([^\\\"]+)\\\"/).exec(iframe)[1],\n path = src.split('?')[1];\n\n // Embedly stores the URL of a thumbnail of embed in the SRC of the iframe.\n // This decomposes that query sting to a hash.\n var query = path.split('&').reduce(function(query, arg){\n var parts = arg.split('=').map(decodeURIComponent);\n query[parts[0]] = parts[1];\n return query;\n }, {});\n\n // We should always use a placeholder.\n var placeholder = query.image;\n if (!placeholder){\n placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';\n }\n\n return [\n '<amp-iframe width=' + width,\n 'height=' + height,\n 'layout=\"responsive\"',\n 'frameborder=\"0\"',\n 'sandbox=\"allow-scripts allow-same-origin allow-popups\"',\n 'src=\"https:' + src + '\">',\n '<amp-img layout=\"fill\" src=\"' + placeholder + '\" placeholder></amp-img>',\n '</amp-iframe>'\n ].join(' ');\n};\n\n// Basic use:\nvar html = amplifiy('<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo\" width=\"500\" height=\"281\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>');\n\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "success", "title": "Demo", "body": "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)." } [/block]