Get bi-weekly articles and news about video on the web delivered to your email inbox.

Adding a Video Lightbox to your Web Page

Video lightboxes are becoming a very popular way to deliver video on web pages, particularly those with limited real estate.  They are similar to the method Facebook uses when displaying photo albums. Lightbox effects are transparent until a thumbnail or other text or image is clicked.  After the click, the web page dims and the lightbox containing the video and any other information opens on top. In reality, the page does not dim.  Instead, the page that opens up over the original page is tinted and transparent creating the illusion that it somehow dimmed the lights on the base page. It’s a cool tool that keeps the user focused on the video without being distracted by the rest of the page’s content. This is perfect for galleries and single videos alike.It is especially useful for web pages already crowded with content and little room for a large video player. For a good example of the lightbox effect, have a peak at the iPlayerHD video gallery.

Creating a lightbox effect up on your site requires a JavaScript plugin on your website. There are plenty of lightbox styled effects to choose from – it is very important that you select one that will actually work. iPlayerHD uses Shadowbox since it supports iframes and it is a proven tool. This is vital because your video needs to be embedded within an iframe so that all devices are supported. Shadowbox does require a small fee if you are using it for commercial purposes. Well worth the small fee! They also allow you to customize your effect with several different options, ranging from color to animation. For full details on the plugin check out their website.

Good luck!

If you don’t have an iPlayerHD account, you may try it here for free for thirty days.

All my best.




Join more than 100,000 businesses and organizations worldwide using iPlayerHD.


No obligations, no credit card required.