Everytime I call the createResetHandler
I bind the video.addEventListener
to the same element.
I need to video.removeEventListener
everytime I destroy the player.
How do I add video.removeEventListener
to the code? https://jsfiddle.net/yb0tn7p9/
const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function createResetHandler(player) {
const resetVideos = document.querySelectorAll('.exit');
resetVideos.forEach(function resetVideoHandler(video) {
video.addEventListener('click', function resetVideoHandler() {
player.destroy();
console.log('hit')
}
);
}
)
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
createResetHandler(player);
}
function addPlayer(video, settings) {
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: video.dataset.id,
width: 640
};
defaults.events = {
"onReady": onPlayerReady
};
const playerOptions = combinePlayerOptions(defaults, settings);
const player = new YT.Player(video, playerOptions);
players.push(player);
return player;
}
return {
addPlayer
};
}());