youtube - 阻止YouTube通过Fancybox自动播放?

标签 youtube fancybox

如果我在YouTube链接上添加了Fancybox(而不是像通常那样没有fancybox嵌入代码),如何避免在页面加载时自动播放?

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

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

最佳答案

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

但是,由于大多数文档都在Fancybox 1上,因此需要花一些时间才能找到答案。

Fancybox会剥离您的YouTube URL,并添加一些默认参数:

  • autoplay = 1 (视频将自动播放)
  • autohide = 1 (视频播放后控件将隐藏)
  • fs = 1 (启用全屏)
  • rel = 0 (隐藏相关视频)
  • hd = 1 (启用高清播放)
  • wmode =不透明(使用YouTube和灯箱修复z-index)
  • enablejsapi = 1 (启用Javascript API)

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

    别沮丧!您可以覆盖脚本中的那些。几种方法。

    普通媒体嵌入:
      $(".fancybox").fancybox({
          helpers : {
              media: true
          }
      });
    

    自定义URL参数方法1:
      $(".fancybox").fancybox({
          helpers : {
              media: {
                  youtube : {
                      params : {
                          autoplay : 0
                      }
                  }
              }
          }
      });
    

    自定义URL参数方法2:
      $(".fancybox").fancybox({,
           helpers : {
              media: true
          },
          youtube : {
              autoplay: 0
          }
      });
    

    在helpers> jquery.fancybox-media.js文件中查找更多详细信息(检查注释)。 Fancybox 2还支持多种URL格式,因此您无需担心应该使用哪个URL版本(即youtube.com/watch?v=###与youtu.be/###)。

    关于youtube - 阻止YouTube通过Fancybox自动播放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10219671/

    相关文章:

    javascript - 需要帮助让 Google map DirectionPanel 在 FancyBox 中显示

    html - 自适应iframe仅适用于Youtube,不适用于Vimeo

    php - 如何从 YouTube API 获取 YouTube 视频缩略图?

    youtube - 如何使用 YouTube Data API v3 获取 channel 中所有视频的列表?

    css - 放大镜(缩放) 光标在图像上

    php - 通过 php session 发送变量以通过 fancybox 3 ajax 形成

    jquery - Youtube API - 获取视频的热门评论

    javascript - 将 php 重定向到 youtube 应用 ios

    Grails 2.0 问题渲染 FancyBox

    jquery - Fancybox 2.0 关闭按钮位于窗口顶角