{"__v":13,"_id":"5666dda06819320d000c2e19","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":"2015-12-08T13:39:44.208Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Displaying images and videos inline is the most popular use case for Embedly. With Embedly jQuery, you can add rich media to any site with just a few lines of code.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example 1: Replace\"\n}\n[/block]\nIt's tricky to show an inline example because it fit seamlessly into a normal web page. For the first example we will show an inline image.\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fkhhg7dw2%2F%3Fheight%3D700%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Fkhhg7dw2%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"700\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/khhg7dw2/?height=700&tabs=result,js,html,css,resources\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\nThe above example uses [Embedly jQuery](https://github.com/embedly/embedly-jquery) to just replace all the ``a`` tags with the embedded media.  The html looks like:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<p>\\n  <a href=\\\"http://instagram.com/p/TwWnNSIXRo/\\\">http://instagram.com/p/TwWnNSIXRo/</a>\\n</p>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAnd with just a little bit of JS we can replace the ``a`` tag with the image.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$('p a').embedly({\\n    key: 'Your Embedly Key',\\n    query: {maxwidth:530} });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example 2: Click to Replace\"\n}\n[/block]\nTo slow it down a bit and show you what actually happened, here is the same HTML. \n\nClick on the button to see the image be replaced inline.\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fvafv6pkm%2F1%2F%3Fheight%3D700%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Fvafv6pkm%2F1%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"700\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/vafv6pkm/1/?height=700&tabs=result,js,html,css,resources\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\nThe JavaScript looks like this\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$('.button').on('click', function(){\\n   $('p a').embedly({query: {maxwidth:530} });\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"tutorials-inline","type":"basic","title":"Inline"}
Displaying images and videos inline is the most popular use case for Embedly. With Embedly jQuery, you can add rich media to any site with just a few lines of code. [block:api-header] { "type": "basic", "title": "Example 1: Replace" } [/block] It's tricky to show an inline example because it fit seamlessly into a normal web page. For the first example we will show an inline image. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fkhhg7dw2%2F%3Fheight%3D700%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Fkhhg7dw2%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/khhg7dw2/?height=700&tabs=result,js,html,css,resources", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] The above example uses [Embedly jQuery](https://github.com/embedly/embedly-jquery) to just replace all the ``a`` tags with the embedded media. The html looks like: [block:code] { "codes": [ { "code": "<p>\n <a href=\"http://instagram.com/p/TwWnNSIXRo/\">http://instagram.com/p/TwWnNSIXRo/</a>\n</p>", "language": "html" } ] } [/block] And with just a little bit of JS we can replace the ``a`` tag with the image. [block:code] { "codes": [ { "code": "$('p a').embedly({\n key: 'Your Embedly Key',\n query: {maxwidth:530} });", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Example 2: Click to Replace" } [/block] To slow it down a bit and show you what actually happened, here is the same HTML. Click on the button to see the image be replaced inline. [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Fvafv6pkm%2F1%2F%3Fheight%3D700%26tabs%3Dresult%2Cjs%2Chtml%2Ccss%2Cresources&src=https%3A%2F%2Fjsfiddle.net%2Fvafv6pkm%2F1%2Fembedded%2Fresult%2Cjs%2Chtml%2Ccss%2Cresources%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/vafv6pkm/1/?height=700&tabs=result,js,html,css,resources", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] The JavaScript looks like this [block:code] { "codes": [ { "code": "$('.button').on('click', function(){\n $('p a').embedly({query: {maxwidth:530} });\n});", "language": "javascript" } ] } [/block]