fancyBox - YouTube 视频不会显示答案

【问题标题】：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 了解更多信息

【讨论】：