Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

187
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda