title: How do I call onYouTubeIframeAPIReady in a different function?
body: <p>I have several web pages and in each webpage, I only change these three variables: <code>IDYT, youtubeVideo, YTtime</code> nothing else. Eventually, I want to write a JS file whereby I can import a function that takes as input these three variables only nothing else.</p>
  <p>On the current webpage my variables are defined as follow:</p>
  <pre><code>let IDYT = [&quot;player&quot;, &quot;player1&quot;, &quot;player2&quot;, &quot;player3&quot;];
  let youtubeVideo = [&quot;E-xMXv3L5L8&quot;, &quot;qNifU_aQRio&quot;, &quot;yXEcd0eGrpw&quot;, &quot;y17RuWkWdn8&quot;];
  let YTtime = [456, 119, 7, 17];
  </code></pre>
  <p>The rest of the script is as follow and will never change in any other webpage (I want to write this as a function that takes the above input!)</p>
  <pre><code>// 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement(&quot;script&quot;);
  
  tag.src = &quot;https://www.youtube.com/iframe_api&quot;;
  var firstScriptTag = document.getElementsByTagName(&quot;script&quot;)[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  // 3. This function creates an &lt;iframe&gt; (and YouTube player)
  //    after the API code downloads.
  
  function Objects1(videoId1, startID1) {
    let object1 = {
      height: &quot;315&quot;,
      width: &quot;560&quot;,
      videoId: videoId1,
      playerVars: {
        autoplay: 0,
        loop: 1,
        start: startID1,
        // mute: 1,
      },
      events: {
        onStateChange: onPlayerStateChange,
      },
    };
    return object1;
  }
  
  const players = [];
  function onYouTubeIframeAPIReady() {
    for (let index = 0; index &lt; IDYT.length; index++) {
      element = IDYT[index];
      object1 = Objects1(youtubeVideo[index], YTtime[index]);
      players.push(new YT.Player(element, object1));
    }
  }
  
  // 5. The API calls this function when the player's state changes.
  //    Here I set the &quot;setPlaybackRate&quot; value to &quot;2&quot;.
  
  function onPlayerStateChange() {
    players.forEach((player) =&gt; player.setPlaybackRate(1.5));
  }
  </code></pre>
  <p>I am finding it very challenging to write this into a function that I may export so that I can use it on other web pages. Can you please help me figure this out?</p>