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

问题在于此网址格式

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=网址格式（链接由用户设置或动态设置），请从链接中删除课程fancybox.iframe并使用fancybox 媒体助手而不是。检查http://fancyapps.com/fancybox/#examples ==＆gt;扩展功能更多。

为了避免已知的iframe问题（主要是使用IE），我建议您将iframe预加载设置为false，检查https://stackoverflow.com/a/16595607/1055987以获取更多信息

fancyBox - YouTube视频无法显示

1 个答案: