Responsive scaling

📘

All parameters on this page are optional

For a working player, you don't need more than the four mandatory parameters. All parameters on this page are optional, that means you don't have to use them.

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.

<div class="videowrapper">
  <video class="afterglow" id="myvideo" width="1920" height="1080">
  	<source type="video/mp4" src="my/video.mp4" />
  </video>
</div>

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.

.videowrapper{
	width: 500px;
  position:relative;
  height: auto;
}

Disable responsiveness

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 you provided (or some other value you might have set via CSS).