IntersectionObserverで、PCのhover×スマホの自動再生に対応した、シーク可能なYouTube風動画プレビュー

<div class="jsSample-hoverPlay">
  <div class="video-card" data-video-id="pPaNVkgVn9o">
    <div class="video-thumb">
      <img class="video-thumb-img" src="https://i.ytimg.com/vi/pPaNVkgVn9o/hqdefault.jpg" alt="" loading="lazy">
      <div class="video-player" id="player-pPaNVkgVn9o"></div>
      <div class="video-seek">
        <div class="video-seek-fill"></div>
      </div>
    </div>
    <p class="video-title">【発達障害】「就活で伝えず」7割超…ASD・ADHD当事者と考える働きやすい職場｜アベプラ</p>
  </div>
  <div class="video-card" data-video-id="ecA2vWj9Xr8">
    <div class="video-thumb">
      <img class="video-thumb-img" src="https://i.ytimg.com/vi/ecA2vWj9Xr8/hqdefault.jpg" alt="" loading="lazy">
      <div class="video-player" id="player-ecA2vWj9Xr8"></div>
      <div class="video-seek">
        <div class="video-seek-fill"></div>
      </div>
    </div>
    <p class="video-title">【不登校の親】「学校に行きなさい」促し続け後悔…子どものSOSにどう向き合う？｜アベプラ</p>
  </div>
  <div class="video-card" data-video-id="gsDdCmTMCEM">
    <div class="video-thumb">
      <img class="video-thumb-img" src="https://i.ytimg.com/vi/gsDdCmTMCEM/hqdefault.jpg" alt="" loading="lazy">
      <div class="video-player" id="player-gsDdCmTMCEM"></div>
      <div class="video-seek">
        <div class="video-seek-fill"></div>
      </div>
    </div>
    <p class="video-title">【投げ銭】「推しのために…」高級車1台分を費やした人と考える依存と規制｜アベプラ</p>
  </div>
  <div class="video-card" data-video-id="AmUBIeEalT0">
    <div class="video-thumb">
      <img class="video-thumb-img" src="https://i.ytimg.com/vi/AmUBIeEalT0/hqdefault.jpg" alt="" loading="lazy">
      <div class="video-player" id="player-AmUBIeEalT0"></div>
      <div class="video-seek">
        <div class="video-seek-fill"></div>
      </div>
    </div>
    <p class="video-title">【ICCに制裁】国際刑事裁判所の日本人所長らが対象に…トランプの狙いを分析｜アベプラ</p>
  </div>
</div>

.jsSample-hoverPlay {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.video-card { cursor: pointer; }
.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.video-thumb-img,
.video-player,
.video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}
.video-player {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.video-thumb.is-playing .video-player { opacity: 1; }
.video-thumb.is-playing .video-thumb-img { opacity: 0; }

/* シークバー（inputではなく、divを自作してスタイル崩れを防ぐ） */
.video-seek {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.video-thumb.is-playing .video-seek {
  opacity: 1;
  pointer-events: auto;
}
.video-seek-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #ff0000;
}
.video-seek-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.video-title {
  margin: 10px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .jsSample-hoverPlay { grid-template-columns: 1fr; }
}

document.addEventListener('DOMContentLoaded', function () {
  const cards = document.querySelectorAll('.video-card');
  const isHoverable = window.matchMedia('(hover: hover)').matches;
  const players = {};
  let apiReady = false;
  let pendingCard = null;

  const tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  document.head.appendChild(tag);

  window.onYouTubeIframeAPIReady = function () {
    apiReady = true;
    if (pendingCard && pendingCard.matches(':hover')) {
      play(pendingCard);
    }
    pendingCard = null;
  };

  function play(card) {
    const videoId = card.dataset.videoId;
    card.querySelector('.video-thumb').classList.add('is-playing');

    if (players[videoId]) {
      players[videoId].playVideo();
      return;
    }

    if (!apiReady) {
      pendingCard = card;
      return;
    }

    players[videoId] = new YT.Player('player-' + videoId, {
      videoId: videoId,
      playerVars: { controls: 0, modestbranding: 1, playsinline: 1 },
      events: {
        onReady: function (e) {
          e.target.mute();
          e.target.playVideo();
        },
      },
    });
  }

  function pause(card) {
    const videoId = card.dataset.videoId;
    card.querySelector('.video-thumb').classList.remove('is-playing');
    const player = players[videoId];
    if (player && typeof player.pauseVideo === 'function') {
      player.pauseVideo();
    }
  }

  // ...（PC/スマホの分岐、シークバーは次のステップで追記）
});

document.addEventListener('DOMContentLoaded', function () {
  const cards = document.querySelectorAll('.video-card');
  const isHoverable = window.matchMedia('(hover: hover)').matches;
  const players = {};
  const timers = {};
  let apiReady = false;
  let pendingCard = null;

  // YouTube IFrame APIを読み込む
  const tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  document.head.appendChild(tag);

  window.onYouTubeIframeAPIReady = function () {
    apiReady = true;
    // API待ちの間にhoverされていたカードがあれば、ここで再生する
    if (pendingCard && pendingCard.matches(':hover')) {
      play(pendingCard);
    }
    pendingCard = null;
  };

  function setFill(card, percent) {
    card.querySelector('.video-seek-fill').style.width = percent + '%';
  }

  function startTracking(card, player) {
    const videoId = card.dataset.videoId;
    clearInterval(timers[videoId]);
    timers[videoId] = setInterval(() => {
      if (card.dataset.seeking === 'true') return; // ドラッグ中は自動更新しない
      const duration = player.getDuration();
      if (!duration) return;
      setFill(card, (player.getCurrentTime() / duration) * 100);
    }, 250);
  }

  function stopTracking(videoId) {
    clearInterval(timers[videoId]);
  }

  function play(card) {
    const videoId = card.dataset.videoId;
    card.querySelector('.video-thumb').classList.add('is-playing');

    if (players[videoId]) {
      // 2回目以降：すでにあるプレイヤーを再生するだけ
      // → pauseVideo()した位置から続きが再生される
      players[videoId].playVideo();
      return;
    }

    if (!apiReady) {
      // IFrame APIの読み込みがまだ終わっていない場合は、準備でき次第再生する
      pendingCard = card;
      return;
    }

    // 初回のhover時だけ、ここでプレイヤーを生成する
    players[videoId] = new YT.Player('player-' + videoId, {
      videoId: videoId,
      playerVars: { controls: 0, modestbranding: 1, playsinline: 1 },
      events: {
        onReady: function (e) {
          e.target.mute(); // 自動再生ポリシー対策でミュートにしておく
          e.target.playVideo();
        },
        onStateChange: function (e) {
          if (e.data === YT.PlayerState.PLAYING) {
            startTracking(card, e.target);
          } else {
            stopTracking(videoId);
          }
        },
      },
    });
  }

  function pause(card) {
    const videoId = card.dataset.videoId;
    card.querySelector('.video-thumb').classList.remove('is-playing');

    const player = players[videoId];
    // 破棄(destroy)ではなく、一時停止(pauseVideo)だけを行う
    // → 再生位置を保持したまま止められる
    if (player && typeof player.pauseVideo === 'function') {
      player.pauseVideo();
    }
  }

  // シークバー（div自作版）の操作
  cards.forEach((card) => {
    const videoId = card.dataset.videoId;
    const seek = card.querySelector('.video-seek');

    function percentFromEvent(e) {
      const rect = seek.getBoundingClientRect();
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const x = clientX - rect.left;
      return Math.min(100, Math.max(0, (x / rect.width) * 100));
    }

    seek.addEventListener('pointerdown', (e) => {
      e.stopPropagation(); // カードのmouseleaveが誤って発火しないようにする
      card.dataset.seeking = 'true';
      setFill(card, percentFromEvent(e));

      function onMove(ev) {
        setFill(card, percentFromEvent(ev));
      }

      function onUp(ev) {
        const percent = percentFromEvent(ev);
        setFill(card, percent);

        const player = players[videoId];
        if (player && typeof player.seekTo === 'function') {
          player.seekTo((percent / 100) * player.getDuration(), true);
        }

        card.dataset.seeking = 'false';
        document.removeEventListener('pointermove', onMove);
        document.removeEventListener('pointerup', onUp);
      }

      document.addEventListener('pointermove', onMove);
      document.addEventListener('pointerup', onUp);
    });
  });

  if (isHoverable) {
    // PC: hoverしている間だけ再生する
    cards.forEach((card) => {
      card.addEventListener('mouseenter', () => play(card));
      card.addEventListener('mouseleave', () => pause(card));
    });
  } else {
    // スマホ: 回線状況を見つつ、ビューポートに入ったら再生する
    const connection = navigator.connection || navigator.webkitConnection;

    function canAutoplay() {
      if (!connection) return true;
      if (connection.saveData) return false;
      return !['slow-2g', '2g', '3g'].includes(connection.effectiveType);
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          const card = entry.target.closest('.video-card');
          if (entry.isIntersecting && canAutoplay()) {
            play(card);
          } else {
            pause(card);
          }
        });
      },
      { threshold: 0.6 }
    );

    cards.forEach((card) => {
      observer.observe(card.querySelector('.video-thumb'));
    });
  }
});