跳转到内容

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

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

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;
 flex-wrap: wrap;
 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) {

 const videoId = el.getAttribute('data-yt');
 const iframe = document.getElementById('pv-main-iframe');
 if (!videoId || !iframe) return;
 // 替换 iframe src
 iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`;
 // 设置卡片高亮
 document.querySelectorAll('.pv-item').forEach(function(item) {
   item.classList.remove('active');
 });
 el.classList.add('active');

} </script>