{"__v":4,"_id":"569591a4fcb1032d0089e037","category":{"__v":10,"_id":"55e75b7ae06f4b190080dbff","pages":["5637e17197666c0d008656a5","569591a4fcb1032d0089e037","569622eafe18811700c9c19b","5696c9588560a60d00e2c1e0","569709ca0b09a41900b2442b","5697129ac8ded91700307b77","5697190a59a6692d003fad6a","5697192969393517000c8280","569f11908f6d4b0d00f13bb2","56a0030b5b981c2b00383df0"],"project":"55d535ca988e130d000b3f5c","version":"55d535cb988e130d000b3f5f","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-02T20:26:34.258Z","from_sync":false,"order":4,"slug":"frame-platform","title":"Frame Platform"},"parentDoc":null,"project":"55d535ca988e130d000b3f5c","user":"55d535835082980d0009c965","version":{"__v":12,"_id":"55d535cb988e130d000b3f5f","hasDoc":true,"hasReference":false,"project":"55d535ca988e130d000b3f5c","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":1,"body":"You can customize the background image and the \"Play\" button for the embedded player used to distribute your application on your own website. Since you can choose the size, 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 upload the image for the background from the Application Properties:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TI4PH6Z2RQuUeaebei9f_Screenshot%202016-01-12%2016.16.32.png\",\n        \"Screenshot 2016-01-12 16.16.32.png\",\n        \"728\",\n        \"624\",\n        \"#a83a3b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nUse these sizes for the background images:\n\n  * Small:  320x180\n\n  * Medium: 480x270\n\n  * Large:  720x405\n\nNote that you can choose the size for the embedded player in the Share App section:\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bdAQ4AwTS2msAkBdos0p_Screenshot%202016-01-12%2016.18.32.png\",\n        \"Screenshot 2016-01-12 16.18.32.png\",\n        \"726\",\n        \"591\",\n        \"#416079\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nFrom this same Share app menu, you also have the ability to change the title and application description that show up in the preview page. You can change the icon that shows in the dashboard, too. 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.\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]","excerpt":"","slug":"customize-your-embedded-player","type":"basic","title":"Customize your embedded player"}

Customize your embedded player


You can customize the background image and the "Play" button for the embedded player used to distribute your application on your own website. Since you can choose the size, 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 upload the image for the background from the Application Properties: [block:image] { "images": [ { "image": [ "https://files.readme.io/TI4PH6Z2RQuUeaebei9f_Screenshot%202016-01-12%2016.16.32.png", "Screenshot 2016-01-12 16.16.32.png", "728", "624", "#a83a3b", "" ] } ] } [/block] Use these sizes for the background images: * Small: 320x180 * Medium: 480x270 * Large: 720x405 Note that you can choose the size for the embedded player in the Share App section: [block:image] { "images": [ { "image": [ "https://files.readme.io/bdAQ4AwTS2msAkBdos0p_Screenshot%202016-01-12%2016.18.32.png", "Screenshot 2016-01-12 16.18.32.png", "726", "591", "#416079", "" ] } ] } [/block] From this same Share app menu, you also have the ability to change the title and application description that show up in the preview page. You can change the icon that shows in the dashboard, too. 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. [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]