为何GLightbox直接打开index文件不显示，Live Server下正常？

核心原因 #

直接打开本地文件用的是file://协议，浏览器对该协议下的网页有严格安全限制：

• GLightbox加载YouTube视频时会生成跨域iframe，file://协议下浏览器会阻止这类跨域资源的正常渲染
• GLightbox内部的部分初始化逻辑（比如资源加载、origin判断）依赖HTTP协议环境的特性，file://下无法正常运行

解决方法 #

1. 开发阶段优先用HTTP服务打开项目：
   继续使用Live Server，或者用XAMPP、Nginx等本地服务器工具，确保网页运行在http://或https://协议下，这是最规范的解决方案。
2. 临时测试（不推荐日常开发用）：
   修改浏览器安全设置绕过file://限制：
   • Chrome/Edge：右键浏览器快捷方式，在目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），重启浏览器后打开本地文件
   • Firefox：在地址栏输入about:config，找到security.fileuri.strict_origin_policy，将其值改为false

代码确认（你的代码本身无问题） #

HTML代码：

<a href="#" class="glightbox position-absolute top-50 start-50 translate-middle">
  <span>
    <i class="fas fa-play-circle"></i>
  </span>
  <span class="border-animation border-animation--border-1"></span>
  <span class="border-animation border-animation--border-2"></span>
</a>

JS代码：

const lightbox = GLightbox({
  href: "https://youtu.be/7lJPlgkduw4",
  type: "video",
  source: "youtube", //vimeo, youtube or local
  width: 900,
  autoPlayVideos: "true",
});

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