{"slug":"fix-youtube-embed-infinite-loading-firefox","locale":"en","isFallback":false,"translationAvailable":["en","id"],"translationUrls":{"en":"/api/notes/fix-youtube-embed-infinite-loading-firefox?locale=en","id":"/api/notes/fix-youtube-embed-infinite-loading-firefox?locale=id"},"title":"Fixing Infinite Loading on YouTube Embeds in Firefox","description":"How to fix YouTube embeds getting stuck on an infinite loading spinner in Firefox by adjusting CSP directives and embed parameters.","date":"2026-04-26","updated":null,"tags":["web","debugging","nextjs","error-fix"],"content":"\nI recently ran into a frustrating issue where YouTube embeds in my Next.js project worked perfectly in Chrome, but got stuck on an infinite loading spinner in Firefox. The player UI loaded, but the video stream never started.\n\nAfter digging into Firefox's strict security policies, I found that the issue stems from a combination of strict Content Security Policy (CSP) enforcement and Enhanced Tracking Protection. Here is how I finally resolved it.\n\n## The Core Issues\n\nFirefox is highly disciplined about `worker-src` and `media-src`. YouTube relies heavily on service workers to manage video streaming segments (from `googlevideo.com`). If these aren't explicitly whitelisted, Firefox silently blocks the stream. Additionally, Firefox's tracking protection sometimes aggressively blocks `youtube-nocookie.com` embeds, treating them as third-party tracking workarounds.\n\n## The Solution\n\n<Steps>\n  <Step>\n  ### 1. Broaden CSP Directives\n  You must explicitly allow YouTube and Google domains across multiple CSP directives, particularly `worker-src` and `media-src`. Update your `next.config.ts` to include these:\n\n  ```typescript\n  // Connect and Media sources need the actual video CDNs\n  const mediaAndConnectSrc = \"https://*.googlevideo.com https://*.ytimg.com https://*.youtube.com https://*.youtube-nocookie.com https://*.google.com\";\n\n  // Workers are critical for Firefox\n  `worker-src 'self' blob: https://*.youtube.com https://*.youtube-nocookie.com`,\n  ```\n  </Step>\n\n  <Step>\n  ### 2. Adjust Referrer-Policy\n  YouTube often needs to verify where the embed request originates. If your `Referrer-Policy` is too strict (like `strict-origin-when-cross-origin`), it might strip necessary context. Downgrading it slightly helps:\n\n  ```typescript\n  {\n    key: \"Referrer-Policy\",\n    value: \"no-referrer-when-downgrade\",\n  }\n  ```\n  </Step>\n\n  <Step>\n  ### 3. Avoid Nocookie Domain and Append Origin\n  If the video still spins, Firefox's Enhanced Tracking Protection might be blocking the nocookie domain. Switch back to the standard `youtube.com` domain and explicitly pass your site's origin.\n\n  ```tsx\n  const origin = typeof window !== \"undefined\" ? window.location.origin : \"\";\n  const src = `https://www.youtube.com/embed/${videoid}?origin=${origin}&rel=0`;\n\n  <iframe src={src} allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen />\n  ```\n  </Step>\n</Steps>\n\nBy combining a more permissive CSP for YouTube's specific CDNs and passing an explicit origin, the embed now streams reliably across all browsers.\n"}