fancyBox - YouTube视频无法显示 [英] fancyBox - YouTube Video Won't Display

问题描述

这是我的HTML：

 < a class =various fancybox.iframehref =http：// www.youtube.com/watch?v=PzBk4-awY40\"> ;<div id =video_nav>< h3 class =nav_text>视频< / h3>< / div>< / a> ; 
  

和jQuery

  $（document）.ready（function（）{
 $（various）。fancybox（{
 maxWidth：800，
 maxHeight：600，
 fitToView：false，
 width：'70％'，
 height：'70％'，
 autoSize：false，
 closeClick：false，
 openEffect： elastic'，
 closeEffect：'none'
}）; 
}）; 
  

我使用最新版本的fancyBox从演示修改了我的代码，除非我使用演示中使用的视频

解决方案

问题是此网址格式

  http://www.youtube.com/watch?v=PzBk4-awY40 
  

...无法使用 iframe 模式（您正在设置 fancybox.iframe



您可以使用youtube的嵌入式格式不支持

  http://www.youtube.com/embed/PzBk4 -awY40 
  

此外，您可以添加？autoplay = 1 尾随参数（如果您希望在打开fancybox之后开始播放视频）

JSFIDDLE

p>

• 如果你真的想坚持使用 / watch？v = URL格式链接由用户设置或动态），然后从您的链接中删除类 fancybox.iframe ，并改用fancybox 媒体助手。检查 http://fancyapps.com/fancybox/#examples ==>更多功能。


• 避免已知的iframe问题（大多数是IE）我建议您将iframe preload设置为 false ，检查http://stackoverflow.com/a/16595607/1055987 了解更多

Here is my HTML:

<a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=PzBk4-awY40"><div id="video_nav"><h3 class="nav_text">Video</h3></div></a>

And jQuery

$(document).ready(function() {
$(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'none'
});
});

I modified my code from a demo using the most recent version of fancyBox, and a video will not display unless I use the video used in the demo

解决方案

The issue is that this URL format

http://www.youtube.com/watch?v=PzBk4-awY40

...won't work with iframe mode (you are setting fancybox.iframe class in your link).

You may rather use youtube's embedded format, which works on devices that don't support flash

http://www.youtube.com/embed/PzBk4-awY40

Additionally, you can add the ?autoplay=1 trailing parameter if you want your videos to start right after fancybox is opened

JSFIDDLE

NOTES:

• If you really want to stick to the /watch?v= URL format (the links are set by the user or dynamically) then remove the class fancybox.iframe from your link and use the fancybox media helper instead. Check http://fancyapps.com/fancybox/#examples ==> extended functionality for more.
• to avoid a known iframe issue (mostly with IE) I would advise you to set iframe preload to false, check http://stackoverflow.com/a/16595607/1055987 for more

这篇关于fancyBox - YouTube视频无法显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！