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 to select one of them.

<!DOCTYPE html>
<html>
  <head>
    <title>afterglow player</title>
    <script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
  </head>
  <body>
    <video class="afterglow" id="myvideo" width="1280" height="720" data-skin="light">
        <source type="video/mp4" src="/path/to/myvideo.mp4" />
    </video>
  </body>
<html>

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):

📘

Read more about player parameters

If you want to learn more about the player parameters that are available, you should take a look at the player parameters section.