使用 Fancybox 防止 YouTube 自动播放？答案

【问题标题】：Prevent YouTube auto-play with Fancybox?使用 Fancybox 防止 YouTube 自动播放？
【发布时间】：2012-04-18 23:39:41
【问题描述】：

如果我将 youtube 链接 Fancybox （而不是像通常没有花式框那样嵌入代码），我如何避免在页面加载时自动播放？

我希望能够单击图像以开始播放。

http://www.estherwarda.com/wci/homepage/

【问题讨论】：

请在此处发布相关代码，而不仅仅是链接。无论如何，它现在是 404。

标签： youtube fancybox

【解决方案1】：

如果您使用的是最新版本的 Fancybox (2+)，现在可以很好地识别和处理 YouTube 和 Vimeo。

但是，由于大多数文档都在 Fancybox 1 上，因此需要进行一些挖掘才能找到它。

Fancybox 去除您的 YouTube 网址并添加一些默认参数：

autoplay=1（视频将自动播放）
autohide=1（播放视频后控件将隐藏）
fs=1（启用全屏）
rel=0（相关视频已隐藏）
hd=1（启用高清播放）
wmode=opaque（修复了 YouTube 和灯箱的 z-index）
enablejsapi=1（启用 Javascript API）

这意味着通常您可以在 URL 中传递这些参数并应用它们，但 Fancybox 2 会忽略这些参数并使用预设值。

不要沮丧！您可以覆盖脚本中的那些。几种方法。

普通媒体嵌入：

  $(".fancybox").fancybox({
      helpers : {
          media: true
      }
  });

自定义网址参数方法一：

  $(".fancybox").fancybox({
      helpers : {
          media: {
              youtube : {
                  params : {
                      autoplay : 0
                  }
              }
          }
      }
  });

自定义网址参数方法二：

  $(".fancybox").fancybox({,
       helpers : {
          media: true
      },
      youtube : {
          autoplay: 0
      }
  });

查看 helpers > jquery.fancybox-media.js 文件以获取更多详细信息（检查 cmets）。 Fancybox 2 还支持多种 URL 格式，因此您无需担心应该使用哪个 URL 版本（即 youtube.com/watch?v=### 与 youtu.be/###）。

【讨论】：

【解决方案2】：

这与您的嵌入代码有关。 Youtube 旧的默认嵌入代码如下所示：http://www.youtube.com/v/bla?version=3。可以采用自动播放参数来控制加载时的播放。你可以将&autoplay=0推回http://www.youtube.com/v/bla

http://www.youtube.com/v/bla?version=3&autoplay=0

【讨论】：