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 媒体助手代替。检查http://fancyapps.com/fancybox/#examples ==> 扩展功能更多。
• 为了避免已知的 iframe 问题(主要是 IE)，我建议您将 iframe 预加载设置为 false，请检查 https://stackoverflow.com/a/16595607/1055987了解更多