{"__v":0,"_id":"57aa3943615a28170018f51b","category":{"__v":5,"_id":"564df317826645210097a890","pages":["564e0de843817f17002a5ecc","564e0e5ea910003500a0ca38","564e19e3bc4e172d00b9534e","56f168612a85600e00ea3dcb","56f17465dbe4cc1700a66a7a"],"project":"564de2dbfe07a81700b5c3a5","version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-19T16:04:39.832Z","from_sync":false,"order":1,"slug":"javascript","title":"JavaScript"},"parentDoc":null,"project":"564de2dbfe07a81700b5c3a5","user":"564de2b4fe07a81700b5c3a4","version":{"__v":8,"_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"],"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-08-09T20:12:51.133Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Native embeds allow you to use embeds from Instagram, Facebook, Gumroad, Reddit and more in iframes rather than existing script tags. The benefit with this, is it provides more control over what script tags have access on the page.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Intro\"\n}\n[/block]\nThe case study here is Instagram, on the left is the native embed and the right is the traditional Embedly photo embed.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4fc0f1d-Screenshot_2016-08-09_14.09.40.png\",\n        \"Screenshot 2016-08-09 14.09.40.png\",\n        955,\n        477,\n        \"#ededea\"\n      ]\n    }\n  ]\n}\n[/block]\nThe image is easier to work with on the right for sizing and display purposes, but the native embed gives more context of the user and comment. The native feature allows developers to choose which version of the embed they want.\n\nThere is however a different issue here, the following is Instagram's embed code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<blockquote class=\\\"instagram-media\\\" data-instgrm-captioned data-instgrm-version=\\\"7\\\" style=\\\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\\\"><div style=\\\"padding:8px;\\\"> <div style=\\\" background:#F8F8F8; line-height:0; margin-top:40px; padding:37.4537037037% 0; text-align:center; width:100%;\\\"> <div style=\\\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\\\"></div></div> <p style=\\\" margin:8px 0 0 0; padding:0 4px;\\\"> <a href=\\\"https://www.instagram.com/p/BFpGYvWIXa_/\\\" style=\\\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\\\" target=\\\"_blank\\\">⛰ #meghandideverything</a></p> <p style=\\\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\\\">A photo posted by :::at:::screeley on <time style=\\\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\\\" datetime=\\\"2016-05-20T20:17:53+00:00\\\">May 20, 2016 at 1:17pm PDT</time></p></div></blockquote>\\n<script async defer src=\\\"//platform.instagram.com/en_US/embeds.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nIt's a lot, but actually excellent. It creates a responsive div via the HTML with a background placeholder so the page doesn't jump around as much when it's loaded. The problem is that script tags are notoriously hard to deal with. \n\nThis is why we created the native flag, it will render the above script tag in an iframe. Here's an example:\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fv3798csj%2F%3Fheight%3D650%26tabs%3Dresult&src=https%3A%2F%2Fjsfiddle.net%2Fv3798csj%2Fembedded%2Fresult%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"650\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/v3798csj/?height=650&tabs=result\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\nLooks the same, but the embed code is different:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"https://cdn.embedly.com/widgets/media.html?type=text%2Fhtml&key=7727df7878374eb682a6551e4204d195&schema=instagram&url=https%3A//www.instagram.com/p/BFpGYvWIXa_/&image=https%3A//scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13249707_1732121887055638_1697475077_n.jpg%3Fig_cache_key%3DMTI1NDU2MjA1OTU4MzA1OTY0Nw%253D%253D.2\\\" width=\\\"640\\\" height=\\\"479\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nYou'll notice just an iframe, no script tag, here's the scoop on why. Embedly needs to be able to resize the height of the iframe on initial load and when the page resizes. This allows us to make the embed responsive and appear correctly in the iframe.\n\nEmbedly starts by taking an educated guess at what width and height the underlying embed will render at, and once the render is complete, we send a message via postMessage to tell the parent to please make the iframe this height.\n\nWe will pass the following JSON via postMessage:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n\\t\\\"src\\\": \\\"https://cdn.embedly.com/widgets/media.html?...\\\",\\n\\t\\\"context\\\": \\\"iframe.resize\\\",\\n  \\\"height\\\": 406\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nThe ``context`` will always be \"iframe.resize\" and the ``height`` will be the height of the embed in pixels and the ``src`` will echo back the src of the iframe. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Using Native\"\n}\n[/block]\nTo use Native, you will need to modify your API calls to add ``native=true`` to the request parameters. Which means:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://api.embedly.com/1/oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBFpGYvWIXa_%2F&key=:key\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nBecomes:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://api.embedly.com/1/oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBFpGYvWIXa_%2F&key=:key&native=true\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nNext you will need to listen to the postMessage message and resize the iframes accordingly. There are a couple options here. You can either add Embedly's platform.js like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script async src=\\\"https://cdn.embedly.com/widgets/platform.js\\\" charset=\\\"UTF-8\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nOr if you want, add the following JavaScript instead:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.addEventListener('message', function(e) {\\n  var data;\\n  try {\\n    data = JSON.parse(e.data);\\n  } catch (e) {\\n    return false;\\n  }\\n\\n  if (data.context !== 'iframe.resize') {\\n    return false;\\n  }\\n\\n  var iframe = document.querySelector('iframe[src=\\\"' + data.src + '\\\"]');\\n\\n  if (!iframe) {\\n    return false;\\n  }\\n \\n  if (data.height) {\\n    iframe.height = data.height;\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Responsive\"\n}\n[/block]\nIf you are using responsive embeds, you need to modify the above code slightly to deal with padding on the container div. Here is an example of responsive native divs.\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fafeyow8o%2F%3Fheight%3D750%26tabs%3Dresult%2Chtml%2Cjs%2Ccss&src=https%3A%2F%2Fjsfiddle.net%2Fafeyow8o%2Fembedded%2Fresult%2Chtml%2Cjs%2Ccss%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"750\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/afeyow8o/?height=750&tabs=result,html,js,css\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\nThe JavaScript code is slightly different.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.addEventListener('message', function(e) {\\n  var data;\\n  try {\\n    data = JSON.parse(e.data);\\n  } catch (e) {\\n    return false;\\n  }\\n\\n  if (data.context !== 'iframe.resize') {\\n    return false;\\n  }\\n\\n  var iframe = document.querySelector('iframe[src=\\\"' + data.src + '\\\"]');\\n\\n  if (!iframe) {\\n    return false;\\n  }\\n \\n \\tvar div = iframe.parentNode;\\n  \\n  // Update the responsive div.\\n  div.style.paddingBottom = ((data.height/iframe.offsetWidth)*100).toPrecision(4) + '%'\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"native","type":"basic","title":"Native"}
Native embeds allow you to use embeds from Instagram, Facebook, Gumroad, Reddit and more in iframes rather than existing script tags. The benefit with this, is it provides more control over what script tags have access on the page. [block:api-header] { "type": "basic", "title": "Intro" } [/block] The case study here is Instagram, on the left is the native embed and the right is the traditional Embedly photo embed. [block:image] { "images": [ { "image": [ "https://files.readme.io/4fc0f1d-Screenshot_2016-08-09_14.09.40.png", "Screenshot 2016-08-09 14.09.40.png", 955, 477, "#ededea" ] } ] } [/block] The image is easier to work with on the right for sizing and display purposes, but the native embed gives more context of the user and comment. The native feature allows developers to choose which version of the embed they want. There is however a different issue here, the following is Instagram's embed code: [block:code] { "codes": [ { "code": "<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"><div style=\"padding:8px;\"> <div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:37.4537037037% 0; text-align:center; width:100%;\"> <div style=\" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\"></div></div> <p style=\" margin:8px 0 0 0; padding:0 4px;\"> <a href=\"https://www.instagram.com/p/BFpGYvWIXa_/\" style=\" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;\" target=\"_blank\">⛰ #meghandideverything</a></p> <p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\">A photo posted by @screeley on <time style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\" datetime=\"2016-05-20T20:17:53+00:00\">May 20, 2016 at 1:17pm PDT</time></p></div></blockquote>\n<script async defer src=\"//platform.instagram.com/en_US/embeds.js\"></script>", "language": "html" } ] } [/block] It's a lot, but actually excellent. It creates a responsive div via the HTML with a background placeholder so the page doesn't jump around as much when it's loaded. The problem is that script tags are notoriously hard to deal with. This is why we created the native flag, it will render the above script tag in an iframe. Here's an example: [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fv3798csj%2F%3Fheight%3D650%26tabs%3Dresult&src=https%3A%2F%2Fjsfiddle.net%2Fv3798csj%2Fembedded%2Fresult%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/v3798csj/?height=650&tabs=result", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] Looks the same, but the embed code is different: [block:code] { "codes": [ { "code": "<iframe class=\"embedly-embed\" src=\"https://cdn.embedly.com/widgets/media.html?type=text%2Fhtml&key=7727df7878374eb682a6551e4204d195&schema=instagram&url=https%3A//www.instagram.com/p/BFpGYvWIXa_/&image=https%3A//scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13249707_1732121887055638_1697475077_n.jpg%3Fig_cache_key%3DMTI1NDU2MjA1OTU4MzA1OTY0Nw%253D%253D.2\" width=\"640\" height=\"479\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "language": "html" } ] } [/block] You'll notice just an iframe, no script tag, here's the scoop on why. Embedly needs to be able to resize the height of the iframe on initial load and when the page resizes. This allows us to make the embed responsive and appear correctly in the iframe. Embedly starts by taking an educated guess at what width and height the underlying embed will render at, and once the render is complete, we send a message via postMessage to tell the parent to please make the iframe this height. We will pass the following JSON via postMessage: [block:code] { "codes": [ { "code": "{\n\t\"src\": \"https://cdn.embedly.com/widgets/media.html?...\",\n\t\"context\": \"iframe.resize\",\n \"height\": 406\n}", "language": "json" } ] } [/block] The ``context`` will always be "iframe.resize" and the ``height`` will be the height of the embed in pixels and the ``src`` will echo back the src of the iframe. [block:api-header] { "type": "basic", "title": "Using Native" } [/block] To use Native, you will need to modify your API calls to add ``native=true`` to the request parameters. Which means: [block:code] { "codes": [ { "code": "https://api.embedly.com/1/oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBFpGYvWIXa_%2F&key=:key", "language": "text" } ] } [/block] Becomes: [block:code] { "codes": [ { "code": "https://api.embedly.com/1/oembed?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBFpGYvWIXa_%2F&key=:key&native=true", "language": "text" } ] } [/block] Next you will need to listen to the postMessage message and resize the iframes accordingly. There are a couple options here. You can either add Embedly's platform.js like so: [block:code] { "codes": [ { "code": "<script async src=\"https://cdn.embedly.com/widgets/platform.js\" charset=\"UTF-8\"></script>", "language": "html" } ] } [/block] Or if you want, add the following JavaScript instead: [block:code] { "codes": [ { "code": "window.addEventListener('message', function(e) {\n var data;\n try {\n data = JSON.parse(e.data);\n } catch (e) {\n return false;\n }\n\n if (data.context !== 'iframe.resize') {\n return false;\n }\n\n var iframe = document.querySelector('iframe[src=\"' + data.src + '\"]');\n\n if (!iframe) {\n return false;\n }\n \n if (data.height) {\n iframe.height = data.height;\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Responsive" } [/block] If you are using responsive embeds, you need to modify the above code slightly to deal with padding on the container div. Here is an example of responsive native divs. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fafeyow8o%2F%3Fheight%3D750%26tabs%3Dresult%2Chtml%2Cjs%2Ccss&src=https%3A%2F%2Fjsfiddle.net%2Fafeyow8o%2Fembedded%2Fresult%2Chtml%2Cjs%2Ccss%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/afeyow8o/?height=750&tabs=result,html,js,css", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] The JavaScript code is slightly different. [block:code] { "codes": [ { "code": "window.addEventListener('message', function(e) {\n var data;\n try {\n data = JSON.parse(e.data);\n } catch (e) {\n return false;\n }\n\n if (data.context !== 'iframe.resize') {\n return false;\n }\n\n var iframe = document.querySelector('iframe[src=\"' + data.src + '\"]');\n\n if (!iframe) {\n return false;\n }\n \n \tvar div = iframe.parentNode;\n \n // Update the responsive div.\n div.style.paddingBottom = ((data.height/iframe.offsetWidth)*100).toPrecision(4) + '%'\n});", "language": "javascript" } ] } [/block]