Blueimp gallery with both images and youtube video

Question

This is the software I am using: https://github.com/blueimp/Gallery

When I click on a thumbnail that link to the video I get the error sign.

This is my HTML:

<div id="gallery">
<!-- main image -->
<ul class="thumbnails">
    <li class="span12 margin-bottom-0">
        <a class="thumbnail center-all" href="http://i.imgur.com/mdqQTPT.jpg" style="max-height: 375px; width: 375px;" data-gallery>
            <img src="http://i.imgur.com/mdqQTPT.jpg" class="main-image">
        </a>
    </li>
</ul>
<!-- other images / video -->
<ul class="thumbnails"> 
    <li class="span6">
        <a class="thumbnail center-all" href="https://www.youtube.com/watch?v=zv9jHNwaV2E"  style="height: 185px; width: 185px;">
            <img src="http://i.imgur.com/mdqQTPT.jpg" class="additional-image">
        </a>
    </li>               
</ul>

I've created a JSFiddle: http://jsfiddle.net/HhU4K/

When I manually enter some data to feed to blueimp, the youtube video works fine (example: http://jsfiddle.net/HhU4K/1/ EDIT: this works on my localhost but seems to just show the spinning icon on JSFiddle for me. Hope you guys are able to see the video and not just the spinning indicator.)

When I add a youtube video link to the href of the <a> tag it does not work. Any idea what I'm doing wrong?

Answer 1

I was struggling with this a couple of hours. Finally it works from html source. Take a look at this Fiddle Make sure to set the attribute with the youtube video id. Not just "youtube", use "data-youtube" or will not work :S

<a href="http://www.youtube.com/watch?v=zv9jHNwaV2E"
title="LES TWINS - An Industry Ahead"
type="text/html"
data-youtube="zv9jHNwaV2E"
poster="http://img.youtube.com/vi/zv9jHNwaV2E/0.jpg"
></a>

Hope this helps.