Why, when I create a second player, I can no longer pause it, although when I first create a player in the this.player variable, I can pause it. At the same time, for some reason, when creating the second player, pauseVideo () does not work, although we call it on a variable that is simply overwritten and has this method.This is my code.
constructor(selectorBtn, selectorBlock) {
this.button = document.querySelectorAll(selectorBtn);
this.block = document.querySelector(selectorBlock);
this.close = this.block.querySelector(".close");
}
createPlayer(url) {
this.player = new YT.Player("frame", {
height: "100%",
width: "100%",
videoId: `${url}`,
});
this.block.style.display = "flex";
}
closePlayer() {
this.close.addEventListener("click", () => {
this.block.style.display = "none";
this.player.pauseVideo();
console.log("knock");
});
}
init() {
let tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log("hi from init");
this.button.forEach((btn) => {
btn.addEventListener("click", () => {
const url = btn.dataset.url;
this.createPlayer(url);
this.closePlayer();
});
});
}
}
I call this class like this
let videoplayer=new Video('.showup .play','.overlay')
videoplayer.init()