Youtube Fancybox无法使用 [英] Youtube fancybox will not work
问题描述
我目前正在尝试制作一个带有YouTube视频的fancybox.我目前在页面上还有几个fancybox,但似乎无法使该fancybox正常工作,其他fancybox具有fancybox-iframe或fancybox类,具体取决于内容(如果有帮助).
I am currently trying to make a fancybox with a youtube video inside it. I currently have a couple more fancyboxes on the page but can not seem to get this fancybox to work,the other fancyboxes have the class of fancybox-iframe or fancybox depending on the content if this is any help.
下面是我要添加fancybox的链接.
Below is the link that I want to add fancybox to.
<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>
这是我要放入幻想箱的iframe.有人可以帮我吗?
This is the iframe that I am putting into my fancybox. Can somebody please help me?
<iframe width="420" height="345" src="http://www.youtube.com/embed/krlR2-YGk4sI?autoplay=1" frameborder="0" allowfullscreen></iframe>
谢谢
推荐答案
您无需将视频放置在iframe
内.您唯一需要的html是视频链接,例如:
You don't need to place your video inside an iframe
. The only html you need is the link to your video like :
<a class="fancybox" href="http://youtu.be/krlR2-YGk4sI" target="_blank">Open youtube</a>
通知 <a>
标记中的类fancybox
(您可以使用任何其他 class 名称,只需确保将正确的选择器绑定到fancybox)
Notice the class fancybox
in the <a>
tag (you can use any other class name, just make sure you bind the correct selector to fancybox)
然后在您的页面中包含fancybox 媒体帮助器:
Then include the fancybox media helper in your page :
<script type="text/javascript" src="path/to/fancybox/files/helpers/jquery.fancybox-media.js"></script>
...,然后将helpers
媒体API选项添加到您的自定义脚本中,例如:
... and add the helpers
media API option to your custom script like :
$(document).ready(function () {
$('.fancybox').fancybox({
helpers: {
media: {}
}
});
});
请参见 JSFIDDLE
See JSFIDDLE
这篇关于Youtube Fancybox无法使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!