我正在尝试使用我在图片库中找到的一些教程制作带有fancybox的视频库，但我不确定这是否是我正在寻找的内容。我只有一个图标，显示一个包含我所有iframe的fancybox，并希望将视频容器转换为视频库。
这是我的HTML：
<a id="videoIcon" href="#video" class="fancybox">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/photo-video-start-icon.png" width="33" height="33">
</a>
<div id="video" style="display: none;" data-fancybox-group="gallery">
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2plsuh" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6zo" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn66h" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pjpvg" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6wd" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn61r" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2p5add" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2or2yc" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2of336" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
</div>
这是我的JS：
$(document).ready(function() {
$("a#videoIcon").fancybox();
$(".fancybox_iframe").fancybox({
type : 'iframe'
});
});
这里是DEMO
谢谢你，抱歉我的英文不好
P.S：使用ajax调用获取iframe并将响应放在带有Handlebars.js的模板中，因此包含所有视频的div在开头实际上是空的。尽管如此，我认为这与解决方案无关。