fancyBox v3加载Vimeo视频时全屏按钮缺失的技术问询

我之前在项目里也遇到过一模一样的问题，折腾了一阵才找到关键的解决点，给你几个靠谱的方案：

1. 给Vimeo视频URL添加全屏控制参数 #

Vimeo的嵌入播放器支持通过URL参数强制启用全屏功能，你需要在视频链接末尾追加 ?fullscreen=1（如果已经有其他参数就用 &fullscreen=1）。比如：

// 无其他参数时
https://player.vimeo.com/video/123456?fullscreen=1

// 已有其他参数（比如自动播放）时
https://player.vimeo.com/video/123456?autoplay=1&fullscreen=1

这个参数是让Vimeo播放器本身显示全屏按钮的关键，移动端的问题尤其依赖这个参数。

2. 显式配置fancyBox的iframe属性 #

虽然你提到生成的iframe已经有webkitallowfullscreen这类属性，但有时候fancyBox的默认配置可能存在疏漏，建议在初始化时显式声明这些属性，确保兼容性。示例代码：

$('[data-fancybox="vimeo"]').fancybox({
  iframe: {
    css: {
      width: '80%',
      height: '80%'
    },
    attr: {
      allowfullscreen: 'true',
      webkitallowfullscreen: 'true',
      mozallowfullscreen: 'true',
      allow: 'fullscreen' // HTML5标准属性，适配现代浏览器
    }
  }
});

3. 检查Vimeo视频的权限设置 #

别忽略了视频本身的权限！登录Vimeo后台，找到对应视频的「嵌入设置」，在「播放选项」里确认「允许全屏播放」是开启状态。如果视频所有者禁用了这个权限，无论前端怎么配置都没用。

4. 移动端专属修复：调整playsinline参数 #

如果移动端依然无法显示全屏按钮，试试在Vimeo URL里添加 &playsinline=0：

https://player.vimeo.com/video/123456?fullscreen=1&playsinline=0

很多移动端浏览器会限制内联播放的视频触发全屏，这个参数会禁用内联播放模式，让视频可以正常调用系统全屏功能。

你可以按顺序尝试这些方案，一般前两步就能解决大部分问题了。

内容的提问来源于stack exchange，提问作者user2521295