Playing in a lightbox

Playing video in a lightbox is a dreadful task. If you don't use afterglow.

Sometimes, it's just not the best solution to include a video into a webpage. The information it provides maybe very useful, but there is just no space to insert a video player.

afterglow provides a cool way to playback videos in a lightbox (or modal, popup, give it another name). You can find a demo of afterglow's fully responsive lightbox feature here.


In order to open a video in a lightbox, you'd just create it's <video> element like you would for a normal player. The only thing that changes, is that it does not get the class afterglow. Quick example:

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

You then add a trigger element. Afterglow takes <a> elements with the class afterglow as triggers. Just insert a hyperlink <a> with the video id as href attribute. Like this:

<a class="afterglow" href="#myvideo">Launch lightbox</a>

By assigning the class afterglow to the element, afterglow knows that you want the video with the id provided in the href attribute to play in a lightbox when the link is clicked.

A complete HTML page with a working lightbox setup would look like this:

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


Class goes to the link, not to the player

Just remember this. If you don't want the player to be initalized but to open in a lightbox, don't give it the class afterglow. Instead, give the link element which should launch the lightbox this class.

Lightbox scaling

As the lightbox is fully responsive, it may display your video larger than it's actual size. If you don't want the lightbox to overscale your video, use the lightbox parameters to change this behaviour.


Old IE alert!

When using Internet Explorer 9, there are some drawbacks with link recognition. Make sure to properly open and close all tags that might be placed before the link element, otherwise problems might occur.