{"_id":"580e3f059f6a9a3900477b73","version":{"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"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"},"category":{"_id":"5666dac5d784a70d00397bcb","__v":8,"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":4,"slug":"tutorials","title":"Tutorials"},"githubsync":"","user":"564de2b4fe07a81700b5c3a4","__v":0,"project":"564de2dbfe07a81700b5c3a5","parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-24T17:04:05.872Z","link_external":false,"link_url":"","sync_unique":"","hidden":true,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"Embedly allows providers to set the height of the embed through JavaScript. This is useful if your Embed has a fixed height or does not predictably resize with default responsive sizing. \n\nRight now this only works for customers that use Native embeds like [Medium](https://medium.com) and [Embedly's cards](http://embed.ly/cards).\n\n[Native](doc:native) \n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Please read how Native Embeds work!\",\n  \"body\": \"You can read about Native Embeds [here](doc:native)\"\n}\n[/block]\nIf you are a provider all you need to do is send the height via postMessage like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.parent.postMessage(JSON.stringify({ \\n\\tsrc: window.location.toString(), \\n\\tcontext: 'iframe.resize', \\n\\theight: 300 // pixels\\n}), '*')\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nSo as an example, for a fixed height embed you can use the following.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.addEventListener('resize', function(){\\n\\twindow.parent.postMessage(JSON.stringify({ \\n    src: window.location.toString(), \\n    context: 'iframe.resize', \\n    height: 300 // pixels\\n  }), '*')\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nPlease make sure you stringify the object before you send it up via postMessage, if you don't the code will not work.","excerpt":"","slug":"provider-height-resizing","type":"basic","title":"Provider Height Resizing"}

Provider Height Resizing


Embedly allows providers to set the height of the embed through JavaScript. This is useful if your Embed has a fixed height or does not predictably resize with default responsive sizing. Right now this only works for customers that use Native embeds like [Medium](https://medium.com) and [Embedly's cards](http://embed.ly/cards). [Native](doc:native) [block:callout] { "type": "success", "title": "Please read how Native Embeds work!", "body": "You can read about Native Embeds [here](doc:native)" } [/block] If you are a provider all you need to do is send the height via postMessage like so: [block:code] { "codes": [ { "code": "window.parent.postMessage(JSON.stringify({ \n\tsrc: window.location.toString(), \n\tcontext: 'iframe.resize', \n\theight: 300 // pixels\n}), '*')\n", "language": "javascript" } ] } [/block] So as an example, for a fixed height embed you can use the following. [block:code] { "codes": [ { "code": "window.addEventListener('resize', function(){\n\twindow.parent.postMessage(JSON.stringify({ \n src: window.location.toString(), \n context: 'iframe.resize', \n height: 300 // pixels\n }), '*')\n})", "language": "javascript" } ] } [/block] Please make sure you stringify the object before you send it up via postMessage, if you don't the code will not work.