{"_id":"569591a4fcb1032d0089e037","user":"55d535835082980d0009c965","parentDoc":null,"__v":5,"project":"55d535ca988e130d000b3f5c","category":{"_id":"55e75b7ae06f4b190080dbff","__v":10,"project":"55d535ca988e130d000b3f5c","version":"55d535cb988e130d000b3f5f","pages":["5637e17197666c0d008656a5","569591a4fcb1032d0089e037","569622eafe18811700c9c19b","5696c9588560a60d00e2c1e0","569709ca0b09a41900b2442b","5697129ac8ded91700307b77","5697190a59a6692d003fad6a","5697192969393517000c8280","569f11908f6d4b0d00f13bb2","56a0030b5b981c2b00383df0"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-02T20:26:34.258Z","from_sync":false,"order":4,"slug":"frame-platform","title":"Frame Platform"},"version":{"_id":"55d535cb988e130d000b3f5f","__v":12,"project":"55d535ca988e130d000b3f5c","hasDoc":true,"hasReference":false,"createdAt":"2015-08-20T02:04:59.052Z","releaseDate":"2015-08-20T02:04:59.052Z","categories":["55d535cc988e130d000b3f60","55d6b238d2a8eb1900109eef","55d6b4f3250d7d0d004274cd","55d7967960fc730d00fc2852","55da9804e835f20d009fc5d0","55e75b1de06f4b190080dbfd","55e75b39e06f4b190080dbfe","55e75b7ae06f4b190080dbff","564f5a4e33082f0d001bb709","570fb64aa38d470e0060cbff","586d0dd89a854123001acd65","586d0e3b9a854123001acd66"],"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-01-12T23:52:04.583Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"You can customize the size, background image, and the \"Play\" button for the embedded player used to distribute your application on your own website. It's best to know which size you plan to use and pick a background image with the right resolution for the best image quality.  \n\nYou can set the size and upload the images for the background and play button from the Share Application page (click on the arrow next to any app and select \"Embed App\"):\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c13bea8-Screen_Shot_2017-05-22_at_10.08.44_PM.png\",\n        \"Screen Shot 2017-05-22 at 10.08.44 PM.png\",\n        780,\n        772,\n        \"#d7dfe0\"\n      ]\n    }\n  ]\n}\n[/block]\nSet the size by choosing an option from the \"Player size\" dropdown menu. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/cda2bcd-Screen_Shot_2017-05-22_at_10.14.43_PM.png\",\n        \"Screen Shot 2017-05-22 at 10.14.43 PM.png\",\n        1450,\n        1092,\n        \"#dfe7e7\"\n      ]\n    }\n  ]\n}\n[/block]\nThen scroll down on the page until you see the \"Background\" and \"Play button\" options:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c177ba7-Screen_Shot_2017-05-22_at_10.11.20_PM.png\",\n        \"Screen Shot 2017-05-22 at 10.11.20 PM.png\",\n        1442,\n        1094,\n        \"#1c1c1c\"\n      ]\n    }\n  ]\n}\n[/block]\nUse these sizes for your custom background images to match the player size you chose:\n\n  * Small:  320x180\n\n  * Medium: 480x270\n\n  * Large:  720x405\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"There is a fourth embedded player size that you can invoke by changing the size field in your embed script from S, M, or L to \\\"XS\\\" - the size of this extra small player is:  240x135.\",\n  \"title\": \"Pro tip:  Extra small player size\"\n}\n[/block]\nFrom this same Share Applications page, you also have the ability to change the application description that shows up in the preview page. Again, you can preview how the player looks by using the URL provided on the Share Application page, or just by clicking the \"Preview\" button.","excerpt":"","slug":"customize-your-embedded-player","type":"basic","title":"Customize your embedded player"}

Customize your embedded player


You can customize the size, background image, and the "Play" button for the embedded player used to distribute your application on your own website. It's best to know which size you plan to use and pick a background image with the right resolution for the best image quality. You can set the size and upload the images for the background and play button from the Share Application page (click on the arrow next to any app and select "Embed App"): [block:image] { "images": [ { "image": [ "https://files.readme.io/c13bea8-Screen_Shot_2017-05-22_at_10.08.44_PM.png", "Screen Shot 2017-05-22 at 10.08.44 PM.png", 780, 772, "#d7dfe0" ] } ] } [/block] Set the size by choosing an option from the "Player size" dropdown menu. [block:image] { "images": [ { "image": [ "https://files.readme.io/cda2bcd-Screen_Shot_2017-05-22_at_10.14.43_PM.png", "Screen Shot 2017-05-22 at 10.14.43 PM.png", 1450, 1092, "#dfe7e7" ] } ] } [/block] Then scroll down on the page until you see the "Background" and "Play button" options: [block:image] { "images": [ { "image": [ "https://files.readme.io/c177ba7-Screen_Shot_2017-05-22_at_10.11.20_PM.png", "Screen Shot 2017-05-22 at 10.11.20 PM.png", 1442, 1094, "#1c1c1c" ] } ] } [/block] Use these sizes for your custom background images to match the player size you chose: * Small: 320x180 * Medium: 480x270 * Large: 720x405 [block:callout] { "type": "info", "body": "There is a fourth embedded player size that you can invoke by changing the size field in your embed script from S, M, or L to \"XS\" - the size of this extra small player is: 240x135.", "title": "Pro tip: Extra small player size" } [/block] From this same Share Applications page, you also have the ability to change the application description that shows up in the preview page. Again, you can preview how the player looks by using the URL provided on the Share Application page, or just by clicking the "Preview" button.