Category Archives: jQuery Video Lightbox

Tracking HTML5 Lightbox with Google Analytics

HTML5 Lightbox, HTML5 Video Lightbox, jQuery LightBox, jQuery Video Lightbox

Product:

HTML5 Lightbox

Question:

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?

Answer:

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"
    };
</script>

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, HTML5 Video Lightbox, jQuery LightBox, jQuery Video Lightbox

Product:

HTML5 Lightbox

Question:

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

Answer:

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 http://wistia.com/doc/embedding#fallback_iframe_embed, 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="//fast.wistia.net/embed/iframe/avk9twrrbn" 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="//fast.wistia.net/embed/iframe/avk9twrrbn?autoPlay=true" 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

Add a hyperlink in Lightbox text

HTML5 Lightbox, jQuery LightBox, jQuery Video Lightbox

Question:

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.

Answer:

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='http://www.html5box.com'>HTML5Box.com</a>.">
<img src="images/Evening_96.jpg" />
</a>

You can check the demo Image on the page: http://html5box.com/html5lightbox/index.php

No video just audio

HTML5 Video Lightbox, jQuery Video Lightbox

Question:

I just downloaded and installed the free version of html5light box and I have it loading an mp4 video and when the video is loaded in the light box, the audio plays but the video does not. In Chrome it is just a black box with the player controls. In firefox there is a "loading" wheel spinning where the video should be.

Answer:

It's just because your video file is not HTML5 compatible. You can view this tutorial and convert your video file: http://html5box.com/html5gallery/install.php#videoformat

How to displaying a Vimeo video in a Lightbox that launches with the page load

jQuery Video Lightbox

You can try the jQuery plugin HTML5 Lightbox: http://html5box.com/html5lightbox/index.php, the quick installation is here: http://html5box.com/html5lightbox/index.php#quickinstallation

You can add the following code to your webpage head section, just before </head>, and must be after the html5lightbox.js code.

<script type="text/javascript">
	jQuery("document").ready(function(){
		html5Lightbox.showLightbox(4, 'http://player.vimeo.com/video/1084537', 'Big Buck Bunny');
	});
</script>