跳转到内容

2026年冬季新番/PV导视(生肉版)

来自次元企鹅情报局百科
Admin留言 | 贡献2025年11月22日 (六) 12:42的版本

PV 测试(单视频)

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

PV 区

     <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
Fate/strange Fake | 第1弾PV(测试用)
       <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>

<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>