Youtube fancybox 将无法正常工作

【问题标题】：Youtube fancybox will not workYoutube fancybox 将无法正常工作
【发布时间】：2014-01-16 00:26:20
【问题描述】：

我目前正在尝试制作一个带有 youtube 视频的花式盒子。我目前在页面上还有几个fancybox，但似乎无法让这个fancybox 工作，其他fancybox 有fancybox-iframe 或fancybox 类，具体取决于内容是否有帮助。

下面是我要添加fancybox的链接。

<a href="http://youtu.be/krlR2-YGk4sI" target="_blank"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a>

这是我放入我的fancybox 的iframe。有人可以帮帮我吗？

<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>

谢谢

【问题讨论】：

标签： html youtube fancybox fancybox-2

【解决方案1】：

您无需将视频放在iframe 中。您需要的唯一 html 是指向您的视频的链接，例如：

<a class="fancybox" href="http://youtu.be/krlR2-YGk4sI" target="_blank">Open youtube</a>

注意<a> 标记中的fancybox 类（您可以使用任何其他类名称，只需确保将正确的选择器绑定到fancybox）

然后在您的页面中包含fancybox 媒体助手：

<script type="text/javascript" src="path/to/fancybox/files/helpers/jquery.fancybox-media.js"></script>

... 并将 helpers 媒体 API 选项添加到您的自定义脚本中，例如：

$(document).ready(function () {
    $('.fancybox').fancybox({
        helpers: {
            media: {}
        }
    });
});

见JSFIDDLE

【讨论】：