【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む

index.html

<div class="container">
  <div class="js-modal-video-open" data-url="https://www.youtube.com/watch?v=xxxxxxxxxxx">
    <img class="thumbnail" src="x-thumb.jpg" />
  </div>
  <div class="js-modal-video-open" data-url="https://www.youtube.com/watch?v=yyyyyyyyyyy">
    <img class="thumbnail" src="y-thumb.jpg" />
  </div>
  <div id="modal-video" class="close js-modal-video-close">
    <div id="player"></div>
  </div>
</div>

index.slim

.container
  .js-modal-video-open[data-url="https://www.youtube.com/watch?v=xxxxxxxxxxx"]
    img.thumbnail[src="x-thumb.jpg"]
  .js-modal-video-open[data-url="https://www.youtube.com/watch?v=yyyyyyyyyyy"]
    img.thumbnail[src="y-thumb.jpg"]
  #modal-video.close.js-modal-video-close
    #player

video.js

/**
 * @class ToggleModal
 * @description モーダルウィンドウの表示切替を行い、YouTube動画を動的に埋め込む
 * @argument target 対象のYouTube動画を含む要素
 */
class ToggleModal {
  constructor(target) {
    this.target = target;
    this.videoId = target.dataset.url.slice(-11);
    this.loadIframePlayerAPI();
    this.open();
    this.close();
  }

  /**
   * @method loadIframePlayerAPI
   * @description IFrame Player APIを読み込む
   */
  loadIframePlayerAPI() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  /**
   * @method onYouTubeIframeAPIReady
   * @description YouTube動画を動的に埋め込む
   */
  onYouTubeIframeAPIReady() {
    let ytPlayer = new YT.Player('player', {
      videoId: this.videoId,
      playerVars: {
        'autoplay': 1,
        'controls': 1
      }
    });
  }

  /**
   * @method remakePlayerElement
   * @description YouTube動画を埋め込む要素を再作成
   */
  remakePlayerElement() {
    const modal = document.querySelector('#modal-video');
    modal.removeChild(modal.firstElementChild);
    let tag = document.createElement('div');
    tag.id = 'player';
    modal.appendChild(tag);
  }

  /**
   * @method open
   * @description モーダルウィンドウを開く
   */
  open() {
    this.target.addEventListener('click', event => {
      this.onYouTubeIframeAPIReady();
      document.querySelector('#modal-video').classList.add('open');
      document.querySelector('#modal-video').classList.remove('close');
    });
  }

  /**
   * @method close
   * @description モーダルウィンドウを閉じる
   */
  close() {
    document.querySelector('.js-modal-video-close').addEventListener('click', event => {
      document.querySelector('#modal-video').classList.add('close');
      document.querySelector('#modal-video').classList.remove('open');
      this.remakePlayerElement();
    });
  }
}

document.addEventListener('DOMContentLoaded', event => {
  document.querySelectorAll('.js-modal-video-open').forEach(element => {
    new ToggleModal(element);
  });
});

video.scss

.container {
  display: flex;
  .thumbnail {
    cursor: pointer;
    width: 320px;
    height: 180px;
    margin: 0 8px;
  }
  #modal-video {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(#000,.75);
    transition: .5s;
    &.close {
      filter: opacity(0);
      visibility: hidden;
    }
    &.open {
      filter: opacity(1);
      visibility: visible;
    }
    iframe {
      width: 64vw;
      height: 36vw;
    }
  }
}