Fancybox 5.0：关闭弹窗恢复背景视频播放的代码异常问题

问题原因分析 #

你现有代码的核心问题是将Fancybox绑定逻辑嵌套在window.click事件中，每次点击页面都会重复执行Fancybox.bind()，导致事件监听被多次绑定。第一次关闭弹窗时，绑定逻辑还未完全生效，只有第二次关闭时才会触发视频播放的逻辑。

修正后的代码 #

const video = document.querySelector('.hero-section__video-bg video');

// 直接绑定Fancybox，仅需执行一次
Fancybox.bind('[data-fancybox="video"]', {
  on: {
    // 弹窗打开时暂停背景视频
    open: () => {
      video.pause();
    },
    // 弹窗关闭时恢复播放背景视频
    close: () => {
      video.play();
    }
  }
});

优化说明 #

1. 移除window.addEventListener('click', ...)：Fancybox.bind()只需要在页面加载完成后执行一次，重复绑定会引发事件逻辑混乱。
2. 改用Fancybox原生事件：用open事件替代单独给按钮绑定点击事件，确保无论通过哪种方式触发弹窗，背景视频都会暂停，逻辑更统一。
3. 简化代码结构：去掉冗余的按钮点击监听，直接通过Fancybox的生命周期事件控制视频状态。

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