{"_id":"59fb30941a8c8d002837cedc","category":{"_id":"59fb30931a8c8d002837cec4","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:02:28.639Z","from_sync":false,"order":3,"slug":"examples","title":"Examples"},"project":"55e6dcb32d0d3021000daf70","user":"55e6dc8a2d0d3021000daf6e","parentDoc":null,"version":{"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":2,"createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-26T09:40:53.717Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":22,"body":"If you need the player controls to have a background (or maybe you just don't like the default skin), there is an easy way to use a dark and a light skin. Use the [`data-skin` parameter](doc:player-setup) to select one of them.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n  <head>\\n    <title>afterglow player</title>\\n    <script src=\\\"//cdn.jsdelivr.net/npm/afterglowplayer:::at:::1.x\\\"></script>\\n  </head>\\n  <body>\\n    <video class=\\\"afterglow\\\" id=\\\"myvideo\\\" width=\\\"1280\\\" height=\\\"720\\\" data-skin=\\\"light\\\">\\n    \\t<source type=\\\"video/mp4\\\" src=\\\"/path/to/myvideo.mp4\\\" />\\n    </video>\\n  </body>\\n<html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nCurrently, \"light\" and \"dark\" theme are supported.\n\nThis is what a basic example using the light skin could look like (for the purposes of this demo, we use [responsive scaling](doc:responsive-scaling)):\n[block:html]\n{\n  \"html\": \"<video id=\\\"myvideo\\\" class=\\\"afterglow\\\" width=\\\"1280\\\" height=\\\"719\\\" data-autoresize=\\\"fit\\\" poster=\\\"http://afterglowplayer.com/sandbox/v1/poster.jpg\\\" style=\\\"margin: 0 auto;\\\" data-skin=\\\"light\\\">\\n  <source src=\\\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\\\" type=\\\"video/mp4\\\" />\\n</video>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Read more about player parameters\",\n  \"body\": \"If you want to learn more about the player parameters that are available, you should take a look at the [player parameters section](doc:player-parameters).\"\n}\n[/block]","excerpt":"This page shows you how to apply skins to afterglow","slug":"using-dark-or-light-skin","type":"basic","title":"Using the dark or light skin"}

Using the dark or light skin

This page shows you how to apply skins to afterglow

If you need the player controls to have a background (or maybe you just don't like the default skin), there is an easy way to use a dark and a light skin. Use the [`data-skin` parameter](doc:player-setup) to select one of them. [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n <head>\n <title>afterglow player</title>\n <script src=\"//cdn.jsdelivr.net/npm/afterglowplayer@1.x\"></script>\n </head>\n <body>\n <video class=\"afterglow\" id=\"myvideo\" width=\"1280\" height=\"720\" data-skin=\"light\">\n \t<source type=\"video/mp4\" src=\"/path/to/myvideo.mp4\" />\n </video>\n </body>\n<html>", "language": "html" } ] } [/block] Currently, "light" and "dark" theme are supported. This is what a basic example using the light skin could look like (for the purposes of this demo, we use [responsive scaling](doc:responsive-scaling)): [block:html] { "html": "<video id=\"myvideo\" class=\"afterglow\" width=\"1280\" height=\"719\" data-autoresize=\"fit\" poster=\"http://afterglowplayer.com/sandbox/v1/poster.jpg\" style=\"margin: 0 auto;\" data-skin=\"light\">\n <source src=\"http://afterglowplayer.com/sandbox/v1/afterglow_local_hd.mp4\" type=\"video/mp4\" />\n</video>" } [/block] [block:callout] { "type": "info", "title": "Read more about player parameters", "body": "If you want to learn more about the player parameters that are available, you should take a look at the [player parameters section](doc:player-parameters)." } [/block]