jquery - fancyBox - YouTube 视频不会显示

Question

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

Answer 1

问题是这个 URL 格式

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

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

您可能更愿意使用 youtube 的嵌入式格式，它适用于不支持 flash 的设备

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

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

JSFIDDLE

注意事项:

• 如果您真的想坚持 /watch?v= URL 格式(链接由用户设置或动态设置)，请删除类 fancybox.iframe从您的链接并改用 fancybox media helper。检查http://fancyapps.com/fancybox/#examples ==> 更多的扩展功能。
• 为了避免已知的 iframe 问题(主要是 IE)，我建议您将 iframe preload 设置为 false，检查 https://stackoverflow.com/a/16595607/1055987更多