{"slug":"fix-youtube-embed-infinite-loading-firefox","locale":"id","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":"Mengatasi YouTube Embed Muter-Muter Terus di Firefox","description":"Cara memperbaiki video embed YouTube yang nyangkut di loading spinner pada Firefox dengan menyesuaikan aturan CSP dan parameter embed.","date":"2026-04-26","updated":null,"tags":["web","debugging","nextjs","error-fix"],"content":"\nBaru-baru ini saya menghadapi masalah yang cukup menjengkelkan: embed video YouTube di proyek Next.js saya berjalan lancar di Chrome, tapi terus-menerus *loading* (muter-muter) saat dibuka di Firefox. UI dari player berhasil dimuat, tapi *stream* videonya tidak pernah mulai.\n\nSetelah menelusuri kebijakan keamanan Firefox yang ketat, saya menemukan bahwa akar masalahnya ada pada kombinasi aturan *Content Security Policy* (CSP) dan *Enhanced Tracking Protection*. Berikut cara saya mengatasinya.\n\n## Penyebab Utama\n\nFirefox sangat disiplin dalam menerapkan aturan `worker-src` dan `media-src`. YouTube sangat bergantung pada *service workers* untuk mengambil segmen video (dari `googlevideo.com`). Jika domain ini tidak diizinkan secara eksplisit, Firefox akan memblokir *stream* tersebut secara diam-diam. Selain itu, fitur perlindungan pelacakan Firefox terkadang memblokir embed dari `youtube-nocookie.com` karena dicurigai sebagai trik pelacakan pihak ketiga.\n\n## Solusi\n\n<Steps>\n  <Step>\n  ### 1. Perluas Aturan CSP\n  Kamu harus mengizinkan domain YouTube dan Google secara eksplisit di beberapa arahan CSP, terutama `worker-src` dan `media-src`. Perbarui `next.config.ts` kamu dengan menambahkan ini:\n\n  ```typescript\n  // Connect dan Media butuh akses ke CDN video asli\n  const mediaAndConnectSrc = \"https://*.googlevideo.com https://*.ytimg.com https://*.youtube.com https://*.youtube-nocookie.com https://*.google.com\";\n\n  // Workers sangat krusial untuk Firefox\n  `worker-src 'self' blob: https://*.youtube.com https://*.youtube-nocookie.com`,\n  ```\n  </Step>\n\n  <Step>\n  ### 2. Sesuaikan Referrer-Policy\n  YouTube sering kali perlu memverifikasi dari mana permintaan *embed* itu berasal. Jika `Referrer-Policy` kamu terlalu ketat (misalnya `strict-origin-when-cross-origin`), informasi penting bisa terpotong. Menurunkannya sedikit akan sangat membantu:\n\n  ```typescript\n  {\n    key: \"Referrer-Policy\",\n    value: \"no-referrer-when-downgrade\",\n  }\n  ```\n  </Step>\n\n  <Step>\n  ### 3. Hindari Domain Nocookie dan Tambahkan Origin\n  Jika video masih saja *loading*, kemungkinan besar *Enhanced Tracking Protection* memblokir domain nocookie tersebut. Kembalilah menggunakan domain standar `youtube.com` dan berikan parameter *origin* situs kamu secara eksplisit.\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\nDengan menggabungkan CSP yang lebih ramah untuk CDN spesifik YouTube dan menyertakan parameter *origin*, embed video sekarang bisa diputar dengan lancar di semua browser.\n"}