HTML / CSS

モーダル　「Youtube」の埋め込み

モーダルが複数あるとき

javascript
                  
    MicroModal.init({
      awaitOpenAnimation: true,
      awaitCloseAnimation: true,
      disableScroll: true,

      onShow: modal => {
        const iframe = modal.querySelector(".youtube-player");
        if (!iframe) return;

        // data-video-id から ID を取得
        const videoId = iframe.dataset.videoId;

        // テンプレートリテラルで URL を生成（最適）
        iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&playsinline=1&mute=1`;
      },

      onClose: modal => {
        const iframe = modal.querySelector(".youtube-player");
        if (iframe) iframe.src = ""; // 停止
      }
    });