javascript - 包含图像和 youtube 视频的 Blueimp 画廊

Question

这是我正在使用的软件:https://github.com/blueimp/Gallery

当我点击链接到视频的缩略图时，我收到了错误标志。

这是我的 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>

我创建了一个 JSFiddle:http://jsfiddle.net/HhU4K/

当我手动输入一些数据以提供给 blueimp 时，youtube 视频工作正常(例如:http://jsfiddle.net/HhU4K/1/ 编辑:这在我的本地主机上有效，但似乎只是为我显示 JSFiddle 上的旋转图标。希望你们能够观看视频而不仅仅是旋转指示器。)

当我将 youtube 视频链接添加到 href 时的 <a>标记它不起作用。知道我做错了什么吗？

Answer 1

我为此苦苦挣扎了几个小时。最后它从 html 源代码开始工作。看看这个Fiddle确保使用 youtube 视频 ID 设置属性。不仅仅是“youtube”，使用“data-youtube”否则将不起作用: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>

希望这对您有所帮助。