Launching in a lightbox

If you want to launch your video in a modal popup (or 'lightbox'), you should follow the lightbox guide. This example shows you how the result would look like.

<!DOCTYPE html>
<html>
  <head>
    <title>afterglow player</title>
    <script src="//cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script>
  </head>
  <body>
    <a class="afterglow" href="#myvideo">Launch lightbox</a>
    <video id="myvideo" width="960" height="540">
    	<source type="video/mp4" src="/path/to/myvideo.mp4" />
    </video>
  </body>
<html>

Using this basic lightbox setup, the player would look like this:

Launch lightbox

Non-overscaling lightbox

You might want the lightbox to scale only to the actual size of your video. This is easy, use the data-overscale attribute.

The markup stays the same as in the example above, we just add this parameter. So the ´` element should look like this:

<video id="myvideo" width="960" height="540" data-overscale="false">
  <source type="video/mp4" src="/path/to/myvideo.mp4" />
</video>

The lightbox will now scale to fit into the screen, but it's maximum size will be 960x540px. Try to scale this lightbox (you'll only be able to see it working if your screen is wider than ~1000px).

Launch non-overscaling lightbox

📘
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.

Non-overscaling lightbox

📘Read more about player parameters

📘
Read more about player parameters