Vercel部署的SvelteKit项目中视频iFrames无法稳定显示求助

从渲染后的iframe属性（data-src、data-categories="performance"、data-autoblocked="1"）可以明确，这是Vercel的自动性能优化机制导致的——Vercel的CDN或构建工具误将YouTube/Vimeo的iframe识别为可延迟加载的资源，自动替换了src为data-src并阻止初始加载，进而导致iframe内容为空。本地预览正常是因为没有触发Vercel的生产环境优化规则。

1. 禁用Vercel的iframe自动优化 #

方案A：全局配置禁用 #

在项目根目录创建/修改vercel.json，添加以下配置来关闭全局资源转换或精准禁用iframe优化：

// 全局禁用所有资源转换
{
  "routes": [
    {
      "src": "/(.*)",
      "headers": {
        "X-Vercel-CDN-Cache-Control": "no-transform"
      }
    }
  ]
}

// 或仅禁用iframe优化
{
  "transforms": {
    "iframe": false
  }
}

方案B：单个iframe绕过优化 #

在目标iframe标签上添加data-vercel-no-transform属性，直接告诉Vercel不要处理该元素：

<iframe 
  class="player-ratio" 
  src="https://www.youtube.com/embed/video_link" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
  data-vercel-no-transform
></iframe>

2. 调整SvelteKit的渲染策略 #

如果页面使用了服务器端渲染（SSR），尝试切换为客户端渲染（CSR）或静态生成（SSG），避免SSR与Vercel优化的冲突：

• 在页面的+page.js中设置：

  // 禁用SSR，强制客户端渲染
  export const ssr = false;
  
  // 或启用静态生成（适合内容静态的页面）
  export const prerender = true;
  

3. 处理CDN缓存问题 #

问题中“几小时后恢复”的现象指向Vercel CDN缓存，可通过以下操作验证：

• 在Vercel控制台的项目「设置」-「缓存」中手动清除CDN缓存，重新部署后测试。
• 临时给iframe的src添加缓存破折参数（仅用于测试）：

  <iframe src="https://www.youtube.com/embed/video_link?cb={new Date().getTime()}" ...></iframe>
  

4. 改用第三方视频嵌入组件 #

使用Svelte生态的专用视频组件，这类组件已内置兼容性处理，可避免被Vercel优化干扰：

• 示例：使用svelte-youtube组件

  <script>
    import YouTube from 'svelte-youtube';
  </script>
  
  <YouTube 
    videoId="你的视频ID" 
    class="player-ratio" 
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  />
  

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