HTML / CSS

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

モーダル開いたら動画を再生。閉じたら動画を停止＆再生位置を初期化

javascript
                  
    const youtubeURL = "https://www.youtube.com/embed/kLiC8IY7_yc?autoplay=1&playsinline=1&mute=1";

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

      //モーダル開いたら再生
      onShow: modal => {
        const iframe = document.getElementById("youtube-player");
        iframe.src = youtubeURL;  // 開いた瞬間に再生開始
      },

      //モーダル閉じたら停止
      onClose: modal => {
        const iframe = document.getElementById("youtube-player");
        iframe.src = "";  // 閉じたら src を切って停止
      }
    });