Category Archives: jQuery Gallery

Play Twitch video with HTML5 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>

What’s the difference between HTML5 Gallery and HTML5 Lightbox?

Question:

Can you please tell me the difference between gallery and html5 lightbox?

Answer:

They are similar products,  both support images and videos, but they can make different style galleries:

With HTML5 gallery, you can embed the gallery in your web page.
With HTML5 Lightbox, your can display an image/video/gallery in a lightbox popup.