Hey there, sorry to hear your YouTube iframe API code works locally but breaks online—let’s break down the most likely culprits and how to troubleshoot them:

• Missing or out-of-scope variables
  Your code relies on element_id, quiz_permalink, and next_lesson_permalink being accessible when the API initializes. Locally, these might be global variables that load early, but online:

  • They could be wrapped in a local scope (like a module or IIFE) that the YouTube API can’t reach.
  • Dynamic content (like server-rendered variables) might load after the YouTube API script finishes loading.
    Fix: Add console.log(element_id, quiz_permalink) at the start of onYouTubeIframeAPIReady to verify if these variables exist when the API runs. If they’re missing, declare them globally or delay the API script load until those variables are available.

• Mismatched iframe ID
  Double-check that the element_id you pass to YT.Player exactly matches the id attribute of your existing iframe. Online, templates or CMS tools often modify IDs (e.g., adding unique suffixes like -123 for dynamic content) that don’t match your hardcoded value.
  Fix: Inspect the iframe on your live site using browser dev tools to confirm its ID, then update element_id to match.

• DOM loading race condition
  Locally, your iframe might render instantly, but online with slower network speeds or heavier page assets, the iframe might not exist in the DOM when onYouTubeIframeAPIReady fires. The API can’t attach to an element that hasn’t been rendered yet.
  Fix: Wrap your API initialization code in a DOMContentLoaded listener to ensure the iframe exists first:

  document.addEventListener('DOMContentLoaded', function() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  });
  

• Content Security Policy (CSP) restrictions
  Many live sites use CSP to block unauthorized scripts or actions. Your site’s CSP might be:

  • Blocking the YouTube API script from loading (look for Refused to load script errors in the browser console).
  • Blocking the window.location.href redirect (check for Violation of CSP directive errors related to navigation).
    Fix: Update your CSP to allow https://www.youtube.com for scripts, and ensure navigation to your target URLs is permitted.

• Scope issues with callback functions
  If your code is processed by a bundler (like Webpack or Rollup) online, functions like onPlayerStateChange might be bundled into a local scope instead of being global. The YouTube API needs this function to be accessible on the window object to trigger it.
  Fix: Explicitly attach the function to the window object:

  window.onPlayerStateChange = function(event) {
    if (event.data == YT.PlayerState.ENDED) {
      if (quiz_permalink) {
        window.location.href = quiz_permalink;
      } else if (next_lesson_permalink) {
        window.location.href = next_lesson_permalink;
      }
    }
  };
  

• Duplicate or conflicting YouTube API loads
  Online, your site might be loading the YouTube API script twice (e.g., once in your code, once via a plugin or theme). This can cause conflicts where the onYouTubeIframeAPIReady callback doesn’t fire correctly.
  Fix: Check your page’s loaded scripts in dev tools to see if the API is loaded multiple times. Remove any duplicate loads, and ensure your code only loads it once.

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