查看“︁2026年冬季新番/PV导视（生肉版）”︁的源代码

= PV 测试（单视频） =

我们先测试一个视频，确认 JS 能在页面内执行。

== PV 区 ==

<div class="pv-layout">

  <!-- 左侧卡片 -->
  <div class="pv-left">

    <div class="pv-item" data-yt="k1G8EvZg_BY" onclick="switchPV(this)">
      <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
      <div class="pv-title">Fate/strange Fake ｜ 第1弾PV（测试用）</div>
    </div>

  </div>

  <!-- 右侧播放器 -->
  <div class="pv-right">
      <div class="pv-player-box">
        <iframe
          id="pv-main-iframe"
          src="https://www.youtube.com/embed/k1G8EvZg_BY?rel=0&modestbranding=1"
          title="PV 播放器"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin"
          allowfullscreen>
        </iframe>
      </div>
  </div>

</div>

<style>
.pv-layout {
    display: flex;
    gap: 32px;
    margin: 20px 0 40px;
}
.pv-left {
    width: 300px;
}
.pv-item {
    cursor: pointer;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transition: .2s;
}
.pv-item img { width: 100%; border-radius: 10px; }
.pv-title { font-size: 14px; font-weight: bold; margin-top: 6px; }
.pv-item.active {
    box-shadow: 0 0 0 2px #3b82f6;
}
.pv-right { flex: 1; min-width: 400px; }
.pv-player-box iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
}
</style>

<script>
function switchPV(el) {
    var videoId = el.getAttribute('data-yt');
    var iframe = document.getElementById('pv-main-iframe');
    iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1';

    // 高亮
    document.querySelectorAll('.pv-item').forEach(function(n){
        n.classList.remove('active');
    });
    el.classList.add('active');
}
</script>