WordPress中Lightbox无法全屏显示问题求助

可行修复方案 #

1. 添加自定义CSS强制调整尺寸 #

检查当前Lightbox容器的样式限制，将以下代码添加到主题的「自定义CSS」面板（路径：外观→自定义→额外CSS）：

/* 重置Lightbox容器宽高限制 */
.lightbox-container {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100% !important;
  height: 100% !important;
}

/* 让Vimeo iframe自适应容器 */
.lightbox-container iframe {
  width: 100% !important;
  height: 100vh !important;
  aspect-ratio: 16/9; /* 可根据视频实际比例调整 */
}

2. 调整Lightbox插件设置 #

如果使用第三方Lightbox插件（如Fancybox、Magnific Popup）：

• 进入插件设置页，找到「内容尺寸」或「视频设置」选项，开启「全屏模式」，并将最大宽高设为100%
• 确认「响应式视频」选项已开启，确保视频能自适应容器大小

3. 修正Vimeo链接格式 #

确保使用正确的嵌入链接，避免带尺寸限制参数的分享链接。标准嵌入格式为：
https://player.vimeo.com/video/[视频ID]
多余的URL参数可能会强制限制iframe尺寸，需移除这类参数。

4. 修改主题内置Lightbox代码 #

如果是主题自带的Lightbox功能，备份主题文件后，检查functions.php或相关JS文件，查找硬编码的宽高限制并修改。例如：
原限制代码可能类似：

$('.lightbox').magnificPopup({
  type: 'iframe',
  iframe: {
    patterns: {
      vimeo: {
        index: 'vimeo.com/',
        id: '/video/',
        src: 'https://player.vimeo.com/video/%id%?width=640&height=360'
      }
    }
  }
});

修改为：

$('.lightbox').magnificPopup({
  type: 'iframe',
  iframe: {
    patterns: {
      vimeo: {
        index: 'vimeo.com/',
        id: '/video/',
        src: 'https://player.vimeo.com/video/%id%?title=0&byline=0&portrait=0'
      }
    }
  },
  callbacks: {
    open: function() {
      $('.mfp-content').css({
        'max-width': '100vw',
        'max-height': '100vh'
      });
    }
  }
});

5. 检查Vimeo视频嵌入权限 #

登录Vimeo后台，进入对应视频的「设置→嵌入」选项，确保未设置固定嵌入尺寸，且「响应式嵌入」处于开启状态。

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