Drupal.behaviors['youtube-bg-video'] = {
  attach: function (context, settings) {
    context.querySelectorAll('div.youtube-bg-video').forEach(div => {
      Drupal.YT(() => {
        new YT.Player(div, {
          videoId: div.dataset.id,
          playerVars: {
            autoplay: 1,
            controls: 0,
            loop: 1,
            rel: 0,
            playlist: div.dataset.id,
            showinfo: 0,
            mute: 1
          }
        });
      })
    })
  }
};

((document) => {
  let tag = document.querySelector('script[src*="youtube.com/iframe_api"]');
  const html = document.querySelector('html');
  let timer;
  Drupal.YT = function (callback) {
    if (!tag) {
      tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      document.querySelector('head').append(tag);
    }
    if (!window.YT && !timer) {
      let timer = setInterval(() => {
        if (YT) {
          clearInterval(timer);
          Drupal.YT.ready(YT);
        }
      }, 33);
    }
    else {
      Drupal.YT.ready(YT);
    }
    if (html.dataset.YouTubeIframeAPI) {
      callback();
    }
    else {
      html.addEventListener('YouTubeIframeAPIReady', callback);
    }
  };
  Drupal.YT.ready = function (YT) {
    html.dataset.YouTubeIframeAPI = YT;
    html.dispatchEvent(new CustomEvent('YouTubeIframeAPIReady'));
  }
})(document);