Youtube fancybox不起作用

时间:2013-12-28 17:11:51

标签: html youtube fancybox fancybox-2

我目前正在尝试在其中制作带有youtube视频的fancybox。我目前在页面上有更多的fancyboxes,但似乎无法使这个fancybox工作,其他fancyboxes有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>

由于

1 个答案:

答案 0 :(得分:3)

您无需将视频置于iframe内。您需要的唯一HTML是指向您的视频的链接:

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

注意 fancybox标记中的类<a>(您可以使用任何其他名称,只需确保绑定正确的选择器到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