Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

184
Vistas
How do I call onYouTubeIframeAPIReady in a different function?

I have several web pages and in each webpage, I only change these three variables: IDYT, youtubeVideo, YTtime 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.

On the current webpage my variables are defined as follow:

let IDYT = ["player", "player1", "player2", "player3"];
let youtubeVideo = ["E-xMXv3L5L8", "qNifU_aQRio", "yXEcd0eGrpw", "y17RuWkWdn8"];
let YTtime = [456, 119, 7, 17];

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!)

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

function Objects1(videoId1, startID1) {
  let object1 = {
    height: "315",
    width: "560",
    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 < 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 "setPlaybackRate" value to "2".

function onPlayerStateChange() {
  players.forEach((player) => player.setPlaybackRate(1.5));
}

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?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

So what I did was I copied the source into a new JS file. i.e. I used this tag source tag.src = "https://www.youtube.com/iframe_api";

Then underneath this code I pasted the following code

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

function Objects1(videoId1, startID1) {
  let object1 = {
    height: "315",
    width: "560",
    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 < 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 "setPlaybackRate" value to "2".

function onPlayerStateChange() {
  players.forEach((player) => player.setPlaybackRate(1.5));
}

I stored it under YouTubeSetting.js then under my HTML file

I wrote the following:

   <script>
      let IDYT = ["player", "player1", "player2"];
      let youtubeVideo = ["qz0aGYrrlhU", "1Rs2ND1ryYc", "TJF4ldO91n4"];
      let YTtime = [1855, 870, 852];
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement("script");
      // tag.src = "https://www.youtube.com/iframe_api";
      tag.src = "../JS/YouTubeSetting.js";
      var firstScriptTag = document.getElementsByTagName("script")[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    </script>

This solved my problem but I hope that someone can give me a better option in the future.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda