{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Responsive scaling","type":"basic","slug":"responsive-scaling","excerpt":"This page explains how to enable afterglow's reponsive scaling feature.","body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"All parameters on this page are optional\",\n  \"body\": \"For a working player, you don't need more than the four [mandatory parameters](doc:mandatory-parameters). All parameters on this page are optional, that means you don't have to use them.\"\n}\n[/block]\nafterglow will scale your video player according to the video's aspect ratio within it's parent element. The proposed way to create a player that you can style and size to your will with ease is to put a wrapper element around your video player. This way you can provide a width to your wrapper which afterglow will scale into.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"videowrapper\\\">\\n  <video class=\\\"afterglow\\\" id=\\\"myvideo\\\" width=\\\"1920\\\" height=\\\"1080\\\">\\n  \\t<source type=\\\"video/mp4\\\" src=\\\"my/video.mp4\\\" />\\n  </video>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis setup allows you to scale the video dynamically or with fixed dimensions and to use media queries. Make sure to have your video wrapper have some kind of `position` in order to make it a scaling reference for child elements.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".videowrapper{\\n\\twidth: 500px;\\n  position:relative;\\n  height: auto;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Disable responsiveness\"\n}\n[/block]\nIn order to disable this behaviour ('responsive scaling'), you have to pass this parameter to the player:\n\n---\n\n> data-autoresize=\"none\"\n\nIf you pass this parameter to your video element, afterglow will use the [width and height](doc:mandatory-parameters) you provided (or some other value you might have set via CSS). \n\n---","updates":[],"order":12,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"59fb30941a8c8d002837ced2","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Parameters","slug":"player-parameters","order":2,"from_sync":false,"reference":false,"_id":"59fb30931a8c8d002837cec3","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2015-09-04T14:49:28.154Z","__v":0},"project":"55e6dcb32d0d3021000daf70","user":"55e6dc8a2d0d3021000daf6e","parentDoc":null,"version":{"version":"1.1","version_clean":"1.1.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","__v":2},"createdAt":"2015-09-04T14:57:44.614Z","githubsync":"","__v":0}

Responsive scaling

This page explains how to enable afterglow's reponsive scaling feature.

[block:callout] { "type": "info", "title": "All parameters on this page are optional", "body": "For a working player, you don't need more than the four [mandatory parameters](doc:mandatory-parameters). All parameters on this page are optional, that means you don't have to use them." } [/block] afterglow will scale your video player according to the video's aspect ratio within it's parent element. The proposed way to create a player that you can style and size to your will with ease is to put a wrapper element around your video player. This way you can provide a width to your wrapper which afterglow will scale into. [block:code] { "codes": [ { "code": "<div class=\"videowrapper\">\n <video class=\"afterglow\" id=\"myvideo\" width=\"1920\" height=\"1080\">\n \t<source type=\"video/mp4\" src=\"my/video.mp4\" />\n </video>\n</div>", "language": "html" } ] } [/block] This setup allows you to scale the video dynamically or with fixed dimensions and to use media queries. Make sure to have your video wrapper have some kind of `position` in order to make it a scaling reference for child elements. [block:code] { "codes": [ { "code": ".videowrapper{\n\twidth: 500px;\n position:relative;\n height: auto;\n}", "language": "css" } ] } [/block] [block:api-header] { "title": "Disable responsiveness" } [/block] In order to disable this behaviour ('responsive scaling'), you have to pass this parameter to the player: --- > data-autoresize="none" If you pass this parameter to your video element, afterglow will use the [width and height](doc:mandatory-parameters) you provided (or some other value you might have set via CSS). ---