{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Cards","type":"basic","slug":"cards","excerpt":"","body":"Cards provide you with responsive and shareable embeds to drive the reach of your websites, blog posts, and articles. Our [code generator](http://embed.ly/code) makes it super simple to create a card of any site.\n\nThe follow explains how to use platform.js to programmatically create cards.\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Basics\"\n}\n[/block]\nThis adds [platform.js](doc:platformjs) to your site and loads the script asynchronously. By\ndefault ``platform.js`` will create a card for an ``A`` tag or ``BLOCKQUOTE``\nwith the class ``embedly-card``. For example, this will create a card for\nembed.ly:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \" <a href=\\\"http://embed.ly\\\" class=\\\"embedly-card\\\">Embedly</a>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\nAnd this will also create a card:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \" <blockquote class=\\\"embedly-card\\\">\\n <h4><a href=\\\"http://embed.ly/docs\\\">Documentation</a></h4>\\n <p>\\n Embedly's Documentation is the best.\\n </p>\\n </blockquote>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\nThe difference here, is that the ``H4`` will become the title of the Card and\nthe ``P`` text will become the description.\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Customize\"\n}\n[/block]\nThere are a number of ``data-card-*`` attributes that you can use to customize\nthe card. They are as follows:\n\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Attribute\",\n \"h-1\": \"Value\",\n \"h-2\": \"Description\",\n \"0-0\": \"data-card-via\",\n \"0-1\": \"URL i.e http://embed.ly\",\n \"0-2\": \"Specifies the via content in the card. It's a great way to do attribution.\",\n \"1-0\": \"data-card-chrome\",\n \"1-1\": \"\\\"1\\\", \\\"0\\\"\",\n \"1-2\": \"Chrome of 0 will remove the left hand colored border.\",\n \"2-0\": \"data-card-theme\",\n \"2-1\": \"\\\"light\\\", \\\"dark\\\"\",\n \"2-2\": \"For dark backgrounds it's better to specify the dark theme.\",\n \"3-0\": \"data-card-image\",\n \"4-0\": \"data-card-embed\",\n \"5-0\": \"data-card-controls\",\n \"6-0\": \"data-card-width\",\n \"7-0\": \"data-card-align\",\n \"8-0\": \"data-card-recommend\",\n \"3-1\": \"URL i.e. http://embed.ly/image.jpg\",\n \"4-1\": \"URL i.e. https://vimeo.com/62648882\",\n \"5-1\": \"\\\"1\\\", \\\"0\\\"\",\n \"6-1\": \"\\\"100%\\\", \\\"300px\\\", etc.\",\n \"7-1\": \"\\\"left\\\", \\\"center\\\", \\\"right\\\"\",\n \"8-1\": \"\\\"1\\\", \\\"0\\\"\",\n \"7-2\": \"Align the card, Default: \\\"center\\\"\",\n \"6-2\": \"Sets the width of the card. Specifically the max-width, so card is still responsive.\",\n \"5-2\": \"Enable Share Icons. Default: \\\"1\\\"\",\n \"4-2\": \"Instead of using the static page content, the card will embed the video or rich media.\",\n \"3-2\": \"Specify which image to use in article cards.\",\n \"8-2\": \"Disable Embedly Recommendations on video and rich cards. Default: 1\",\n \"9-0\": \"data-card-key\",\n \"9-1\": \"\\\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\\\"\",\n \"9-2\": \"You Embedly API Key. If you are a paid user this will remove Embedly's branding from the cards.\"\n },\n \"cols\": 3,\n \"rows\": 10\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Javascript\"\n}\n[/block]\nPlatform.js has some pretty interesting features for customizing cards further. For example, if you do not want to use a custom class instead of ``embedly-card`` you can use the following code:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly('card', '.card-this');\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nIf you would like to create a card from a single element you can do the\nfollowing:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \" var a = document.getElementById('#myCard');\\n embedly('card', a);\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nLastly if you would like to limit the cards to only embed certain types of\nmedia you can pass in a ``types`` argument::\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly('card', {types: ['rich', 'video', 'image']});\\n\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nor with a custom selector as well:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly('card', {selector: 'a.embed', types: ['article', 'image']});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nIf ``platform.js`` has not loaded yet, it will queue actions till we are ready\nto act on them.\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Listeners\"\n}\n[/block]\nWhen using cards in non-standard displays you may want to listen to some events. Cards supports the following events.\n\n**``card.rendered``**\n\nWhen the card has actually been rendered.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly('on', 'card.rendered', function(iframe){\\n // iframe is the card iframe that we used to render the event.\\n $card = $(iframe);\\n\\n // Grab the width and height.\\n console.log($card.width(), $card.height());\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n**``card.resize``**\n\nWhen the card has been resized. We do this fairly often when the browser window has changed size, or the content in the card has changed.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly('on', 'card.resize', function(iframe){\\n // iframe is the card iframe that we used to render the event.\\n $card = $(iframe);\\n\\n // Grab the width and height.\\n console.log($card.width(), $card.height());\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Defaults\"\n}\n[/block]\nIf you would like to set options globally instead of per card you use\n``defaults``. Here's an example of setting all the cards to align right with a\nwidth of 700px and remove the chrome.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly(\\\"defaults\\\", {\\n cards: {\\n key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\\n width: 700,\\n align: 'right',\\n chrome: 0\\n }\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nNote that data attributes on the card override these defaults. If you wish for the defaults to override the data attributes, you can add ``override: true`` like so:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly(\\\"defaults\\\", {\\n cards: {\\n override: true,\\n width: '90%',\\n ...\\n }\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Player\"\n}\n[/block]\nEmbedly gives you programmatic control of embedded video via [Player.js](https://github.com/embedly/player.js/) and we've expanded that to Cards as well. Player allows you to play, pause, seek and listen to events for cards with video. Here's a quick example:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly('player', function(player){\\n console.log(player.url) // URL of the media that we are operating on.\\n\\n // When the user pauses a video, perform an action.\\n player.on('pause', function(){\\n //display modal.\\n });\\n\\n // Autoplay all the videos that support Player.js\\n player.play()\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\nLearn more about the [Player functionality](doc:player)\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"CSS Customization\"\n}\n[/block]\n\n[block:callout]\n{\n \"type\": \"info\",\n \"title\": \"CSS is only available on a paid plan.\",\n \"body\": \"You can upgrade inside [app.embed.ly](https://app.embed.ly)\"\n}\n[/block]\nEmbedly allows you to customize the styles inside a card. If you want to change the font or colors of the card than this feature is for you! There are a couple of ways to pass styles into a card. We will outline them here. \n\n## inline\nYou can specify the css styles inline via a `style` tag. Embedly will look for a single `style` tag with the `embedly-css` and use that CSS.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<style class=\\\"embedly-css\\\">\\n :::at:::import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);\\n .card {\\n font-family: 'Open Sans Condensed', sans-serif;\\n }\\n .card a, .card .action {\\n color: red;\\n }\\n .hdr {\\n display:none;\\n }\\n</style>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\n## link\nYou can specify a stylesheet for Embedly to place inside the card via a `link` tag. Embedly will look for a single `link` tag with the `embedly-css` and use that CSS.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<head>\\n ...\\n\\t<link rel=\\\"stylesheet\\\" href=\\\"http://example.com/styles/card.css\\\">\\n</head>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\n## defaults\nLastly you can pass the css through defaults like so:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly(\\\"defaults\\\", {\\n cards: {\\n key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\\n\\t\\tcss: 'http://example.com/styles/card.css'\\n }\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n## demo\n[block:embed]\n{\n \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2FvuwLcpw1%2F%3Fheight%3D600%26tabs%3Dresult%2Chtml&src=https%3A%2F%2Fjsfiddle.net%2FvuwLcpw1%2Fembedded%2Fresult%2Chtml%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"600\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n \"url\": \"https://jsfiddle.net/vuwLcpw1/?height=600&tabs=result,html\",\n \"title\": \"Edit fiddle - JSFiddle\",\n \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Remove Branding\"\n}\n[/block]\nCards includes a \"powered by Embedly\" logo at the bottom of every card. If you would like to removed this branding, you can upgrade to a the embed product in [app.embed.ly](https://app.embed.ly/ar?path=settings%2Fplan).\n\nAny card created through [app.embed.ly](https://app.embed.ly) will have branding removed within 24 hours due to browser caching. \n\nFor cards not generated through app.embed.ly you must include your API key, found [here](https://app.embed.ly/ar?path=api%2Fkey). You can do this one of two ways.\n\n### On the Card\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<a href=\\\"embedly-card\\\" data-card-key=\\\"XXXXXXXXXXXX\\\" href=\\\"http://embed.ly\\\"></a>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\n### Via JavaScript\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"embedly(\\\"defaults\\\", {\\n cards: {\\n key: 'XXXXXXXXXXXX',\\n }\\n});\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]","updates":["591eb6ce2c1b1f0f000faa1a","597035777c0fd30038b24063","597f37ac878132001ee24be6","5b607ebed22b04000307c9fe","5b9a35a4d617ad0003f27529","5e1802da496526005f9fd985"],"order":1,"isReference":true,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"564e0de843817f17002a5ecc","__v":28,"githubsync":"","parentDoc":null,"project":"564de2dbfe07a81700b5c3a5","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z"},"user":"564de2b4fe07a81700b5c3a4","category":{"sync":{"isSync":false,"url":""},"pages":["564e0de843817f17002a5ecc","564e0e5ea910003500a0ca38","564e19e3bc4e172d00b9534e","56f168612a85600e00ea3dcb","56f17465dbe4cc1700a66a7a"],"title":"JavaScript","slug":"javascript","order":2,"from_sync":false,"reference":true,"_id":"564df317826645210097a890","project":"564de2dbfe07a81700b5c3a5","__v":5,"createdAt":"2015-11-19T16:04:39.832Z","version":"564de2dbfe07a81700b5c3a8"},"createdAt":"2015-11-19T17:59:04.099Z"}