Category Archives: HTML5 Lightbox

Tracking HTML5 Lightbox with Google Analytics


HTML5 Lightbox


Is there any way to add Google Analytics code which would track the lightbox link on the page? I would like to see how many times the link to the video is clicked on the page?


You could add the following JavaScript to your webpage. Please make sure to change the tracking id to your own Google Analytics tracking id.

<script type="text/javascript">
    var html5lightbox_options = {
    	googleanalyticsaccount: "UA-XXXXXXXX-X"

To view the tracked events, in Google Analytics dashboard, click left menu Behavior -> Events -> Top Events, click Event Category "Lightbox", then Event Action "Open", the URL of the lightbox image/video will be listed as the Event Label.

How to open Wistia video with HTML5 Lightbox


HTML5 Lightbox


I moved my videos to Wistia and I am wondering how can I open Wistia video in lightbox.


To open Wistia video with HTML5 Lightbox, first, you need to find the iframe video URL of your video.

You can view the document at, get the iframe code then copy the URL from the iframe src value.

Then you can use the following code to open the video in lightbox:

<a href="//" class="html5lightbox" data-width=730 data-height=411 >Open Wistia Video in HTML5 Lightbox</a>

To auto play the video on lightbox popup, you can add parameter autoPlay=true to the URL:

<a href="//" class="html5lightbox" data-width=730 data-height=411 >Open Wistia Video in HTML5 Lightbox</a>

Please understand video auto play is not supported on mobile and tablet devices.

The demo is as following:

Open Wistia Video in HTML5 Lightbox

Re-position watermark in HTML5 Lightbox


* This question is for the script HTML5 Lightbox.

I was just wondering, how do I re-position watermark image in lightbox. Currently its on the top left hand side of the lightbox gallery. I wish to make it re-position to the bottom left or right.


You can add the following CSS code to your webpage to move the watermark to the bottom right:

<style type="text/css">
#html5-watermark {
    position: absolute !important;
    top: auto !important;
    left: auto !important; 
    right: 10px !important;   
    bottom: 56px !important;

Change Lightbox CSS properties with own code


Dear support team,

I purchased a single license for the HTML5 lightbox product. The lightbox is installed in a testing website and working well for the most part. The videos are self hosted.

Using the Chrome developer tools I was able to identify the following html page elements:


Adding custom CSS rules to these elements in the html document head does not override the default css.

Can you please advise?


To change the css property with your own code, you need to add the !important at the end of each css value, for example, to change the background overlay color:

#html5-lightbox-overlay {
    background-color: #ff0000 !important;

The !important will override the default css that is setup by the Lightbox script.

Play WebM video in Lightbox under Firefox


Firefox does not support the mp4 video file format. How do I add support for the webm video file format?


You can use data tag data-webm to specify a webm video for Firefox. For example:

<a href="images/Big_Buck_Bunny_2.mp4" data-webm="images/Big_Buck_Bunny_2.webm" class="html5lightbox" >Video</a>

If the data-webm is not specified, the Lightbox plugin will use Flash to play mp4 on Firefox, so it will still work.

Add a hyperlink in Lightbox text


I am using your HTML5 Lightbox scripts and the player. I have created a video, but now need to place an URL, to link to a web description page. Is it possible to add a text url on the bottom area of the video. I have already placed some text there, but I need an hyperlink there.


You can use HTML code in the title, for example:

<a href="images/Evening_1024.jpg" class="html5lightbox" title="You can add link in text <a href=''></a>.">
<img src="images/Evening_96.jpg" />

You can check the demo Image on the page:

Open webpage with HTML5 Lightbox


Hi Support-

I was wondering how to go about Lightbox opening up a html page instead of a video?

Second, I am using Ajax tabs to load pages. Will that be a problem?

Thank you, let me know.


To open a webpage in the Lightbox, you can just add the class name to the link, for example:

<a href="" class="html5lightbox" data-width="960" data-height="600">Link to Page</a>

Ajax loading may be problem. If you experience any problem, after your Ajax loading finishes, you can try to call the HTML5 Lightbox API to re-initialise the script: