BgYoutube.js

export default class BgYoutube {
  constructor(videoId, playerId, width, height, resolution) {
    this.playerId = playerId;
    this.width = width;
    this.height = height;
    this.player = null;

    this.initPlayer(videoId, playerId);
    this.setFullScreen(resolution);
  }
  initPlayer(videoId, playerId) {
    const onYouTubeIframeAPIReady = () => {
      return new YT.Player(playerId, {
        width: this.width,
        height: this.height,
        videoId: videoId,
        playerVars: {
          controls: 0,
          loop: 1,
          modestbranding: 1,
          playlist: videoId,
          playsinline: 1,
          rel: 0,
          showinfo: 0,
        },
        events: {
          'onReady': onPlayerReady,
        }
      });
    }
    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      window.onYouTubePlayerAPIReady = () => {
        this.player = onYouTubeIframeAPIReady();
      };
    } else {
      this.player = onYouTubeIframeAPIReady();
    }
    const onPlayerReady = () => {
      this.player.mute();
      this.player.playVideo();
    }
  }
  setFullScreen(resolution) {
    const elm = document.getElementById(this.playerId);
    let resizeW = 0;
    let resizeH = 0;
    let margin = [];
    if (resolution.x / resolution.y > this.width / this.height) {
      resizeW = resolution.x;
      resizeH = this.height * (resolution.x / this.width);
      let over = (resolution.y - resizeH) / 2;
      margin = [over, 0, over, 0];
    } else {
      resizeW = this.width * (resolution.y / this.height);
      resizeH = resolution.y;
      let over = (resolution.x - resizeW) / 2;
      margin = [0, over, 0, over];
    }
    elm.style.width = `${resizeW}px`;
    elm.style.height = `${resizeH}px`;
    elm.style.marginTop = `${margin[0]}px`;
    elm.style.marginRight = `${margin[1]}px`;
    elm.style.marginBottom = `${margin[2]}px`;
    elm.style.marginLeft = `${margin[3]}px`;
  }
}