document.addEventListener('DOMContentLoaded', function () {
  const modal = document.getElementById('video-modal');
  const iframe = document.getElementById('modal-video');
  const closeBtn = document.querySelector('.modal .close');
  const body = document.body;

  // 開く関数
  const openModal = (videoId) => {
    iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    modal.classList.add('show');
    body.classList.add('open');
  };

  // 閉じる関数
  const closeModal = () => {
    modal.classList.remove('show');
    body.classList.remove('open');
    // アニメーション後にiframeのsrcを空にする（フェードアウト完了を待つ）
    setTimeout(() => {
      iframe.src = '';
    }, 300); // CSSのtransition時間に合わせる
  };

  // サムネクリック
  document.querySelectorAll('.video-item').forEach(item => {
    item.addEventListener('click', () => {
      openModal(item.dataset.videoId);
    });
  });

  // 閉じるボタン
  closeBtn.addEventListener('click', closeModal);

  // モーダル外クリック
  modal.addEventListener('click', e => {
    if (e.target === modal) {
      closeModal();
    }
  });
});