Не обновляется youtube player
class Video {
constructor(triggers, overlay, close) {
this.btns = document.querySelectorAll(triggers);
this.overlay = document.querySelector(overlay);
this.close = this.overlay.querySelector(close);
}
bindTriggers() {
this.btns.forEach(btn => {
btn.addEventListener('click', () => {
if (document.querySelector('iframe#frame')) {
this.overlay.style.display = 'block';
if (this.path !== btn.getAttribute('data-url')) {
this.path = btn.getAttribute('data-url');
this.player.loadVideoById({videoId: this.path});
}
} else {
this.path = btn.getAttribute('data-url');
this.createPlayer(this.path);
}
});
});
}
bindCloseBtn() {
this.close.addEventListener('click', () => {
this.player.stopVideo();
});
this.overlay.addEventListener('click', () => {
this.player.stopVideo();
});
}
createPlayer(url) {
this.player = new YT.Player('frame', {
height: '100%',
width: '100%',
videoId: `${url}`
});
this.overlay.style.display = 'block';
}
init() {
if (this.btns.length > 0) {
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
this.bindTriggers();
this.bindCloseBtn();
}
}
}
new Video('.promo__video__videoplayer_1 .promo__video__play', '.overlay', '.video__close').init();
new Video('.promo__video__videoplayer_2 .promo__video__play_2', '.overlay', '.video__close').init();
вообщем. есть на страничке 2 плеера, но почему-то при нажатии на триггер, показывается одно и то же видео, хотя data-url у кнопок стоят разные. кто-нибудь сталкивался с таким?
В консоле есть 2 ошибки:
Cannot read property 'stopVideo' of undefined,
Cannot read property 'loadVideoById' of undefined