Play Twitch video with HTML5 Gallery

jQuery Gallery, jQuery Video Gallery

Product:

HTML5 Gallery

Question:

I am trying to use the HTML5Gallery and I see you have Vimeo and YouTube. I wonder how can I play Twitch video in HTML5 Gallery?

Answer:

1. In the Twitch video player page, click the Share button, copy the code from the "Embed Video" text box.

2. From the "Embed Share" text, copy the src attribute value of the iframe. It will have a format like https://player.twitch.tv/?autoplay=false&video=vXXXXXXXX

3. When adding the Twitch video the gallery, add a data attribute data-mediatype=12 to the <a> tag.

A demo code snippet is as follows:

<div style="display:none;" class="html5gallery" data-skin="gallery" data-width="480" data-height="272">
    
  <!-- Add Twitch video to Gallery -->
  <a href="https://player.twitch.tv/?autoplay=false&video=v206184868" data-mediatype=12><img src="https://html5box.com/html5gallery/images/Desert_256.jpg" alt="Twitch Video"></a>

  <!-- Add Youtube video to Gallery -->
  <a href="http://www.youtube.com/embed/YE7VzlLtp-4"><img src="http://img.youtube.com/vi/YE7VzlLtp-4/2.jpg" alt="Youtube Video"></a>

</div>

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

Re-position watermark in HTML5 Lightbox

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

jQuery Photo Gallery, jQuery Video 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

HTML5 Lightbox, jQuery LightBox

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

HTML5 Lightbox, HTML5 Video Lightbox

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

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