【问题标题】:fancyBox - YouTube Video Won't DisplayfancyBox - YouTube 视频不会显示
【发布时间】:2014-04-04 15:08:55
【问题描述】:

这是我的 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>

还有 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 修改了演示中的代码,除非我使用演示中使用的视频,否则视频不会显示

【问题讨论】:

    标签: jquery html css fancybox lightbox


    【解决方案1】:

    问题在于这种 URL 格式

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

    ...不适用于iframe 模式(您在链接中设置fancybox.iframe 类)。

    您可能更愿意使用 youtube 的 embedded 格式,该格式适用于不支持 flash

    的设备
    http://www.youtube.com/embed/PzBk4-awY40
    

    此外,如果您希望视频在fancybox 打开后立即开始播放,您可以添加?autoplay=1 尾随参数

    JSFIDDLE

    注意事项

    • 如果您真的想坚持使用/watch?v= URL 格式(链接由用户设置或动态设置),请从您的链接中删除类fancybox.iframe 并使用fancybox 媒体助手反而。查看http://fancyapps.com/fancybox/#examples ==> 了解更多扩展功能。
    • 为避免已知的 iframe 问题(主要是 IE),我建议您将 iframe 预加载设置为 false,查看 https://stackoverflow.com/a/16595607/1055987 了解更多信息

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-12-20
      • 2013-10-28
      • 2013-04-04
      • 2016-05-15
      • 2013-03-21
      • 2016-08-10
      • 2012-07-09
      相关资源
      最近更新 更多