Getting an error when using Youtube API?

Question

JavaScript

Hello!
I ran into a problem - when using the Youtube API, an error pops up on the video:

Here is the code that I used:

export default class VideoPlayer {
  constructor(triggers, overlay) {
    this.btns = document.querySelectorAll(triggers);
    this.overlay = document.querySelector(overlay);
    this.close = this.overlay.querySelector('.close');
  }

  createPlayer(url) {
    this.player = new YT.Player('frame', {
      height: '100%',
      width: '100%',
      videoId: `${url}`,
    });

    console.log(this.player);
    this.overlay.style.display = 'flex';
  }

  init() {
    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.btns.forEach(btn => {
      btn.addEventListener('click', () => {
        const path = btn.getAttribute('data-url');

        this.createPlayer();
      });
    });
  }
}

The video itself does not load at all, although I specified a unique identifier

Answer 1

So you don't pass any url to the createPlayer(url) function. At the same time, you create a path variable with the desired content. Correct at the very end:
this.createPlayer(path);