How to open Wistia video with HTML5 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

Re-position watermark in HTML5 Lightbox

Question:

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

Answer:

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;
}
</style>

How to add a loading animation to HTML5 Gallery

This tutorial is only available for HTML5 Gallery Version 5.7 and above.

To add a loading animation to HTML5 gallery, you can add an extra div with class name html5gallery-loading before the html5gallery div, for example:

<!-- the html5gallery loading div -->

<div class="html5gallery-loading" style="display:block;margin:0 auto;width:300px;height:300px;background:url('html5gallery/loading.gif') no-repeat center center;"></div> 

<!-- your existing html5gallery div -->

<div class="html5gallery" data-skin="darkness" data-width="480" data-height="272" style="display:none;">

After the gallery is loaded, it will automatically hide the loading div.

Change Lightbox CSS properties with own code

Question:

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:

#html5-lightbox-overlay
#html5-lightbox-box
#html5-next
#html5-prev
.html5-nav-container

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

Can you please advise?

Answer:

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

Question:

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

Answer:

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

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

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

Open webpage with HTML5 Lightbox

Question:

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.

Answer:

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

<a href="http://www.yoursite.com/yourpage.htm" 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:

jQuery(".html5lightbox").html5lightbox();

Open Lightbox with JavaScript function

Question:

Is there a way to toggle the Lightbox on and off programmatic. For example, I would like to control how the Lightbox opens and closes. Do you guys have a developers guide to this. Let me know. Thank you.

PS I know html5Lightbox.finish() will help close it. But what is the global function to open the lightbox?

Answer:

You can call the JavaScript API to open the Lightbox, for example:

Open image:

html5Lightbox.showLightbox(0, 'images/Toronto_1024.jpg', 'Image lightbox');

Open YouTube;

html5Lightbox.showLightbox(3, 'http://www.youtube.com/embed/YE7VzlLtp-4', 'YouTube lightbox');