Launching in a lightbox

This page shows you how to make your video player launch 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>
    <title>afterglow player</title>
    <script src="//"></script>
    <a class="afterglow" href="#myvideo">Launch lightbox</a>
    <video id="myvideo" width="960" height="540">
        <source type="video/mp4" src="/path/to/myvideo.mp4" />

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

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" />

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


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.

Did this page help you?