2026年冬季新番/PV导视（生肉版）：修订间差异
无编辑摘要 |
无编辑摘要 |
||
| 第7行： | 第7行： | ||
<div class="pv-layout"> | <div class="pv-layout"> | ||
<!-- | <!-- 左侧卡片区域 --> | ||
<div class="pv-left"> | <div class="pv-left"> | ||
| 第19行： | 第19行： | ||
<!-- 右侧播放器 --> | <!-- 右侧播放器 --> | ||
<div class="pv-right"> | <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> | ||
</div> | </div> | ||
<!-- 样式区 --> | |||
<style> | <style> | ||
.pv-layout { | .pv-layout { | ||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 32px; | |||
margin: 20px 0 40px; | |||
} | } | ||
.pv-left { | .pv-left { | ||
width: 300px; | |||
} | } | ||
.pv-item { | .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 { | .pv-item.active { | ||
box-shadow: 0 0 0 2px #3b82f6; | |||
} | |||
.pv-right { | |||
flex: 1; | |||
min-width: 400px; | |||
} | } | ||
.pv-player-box iframe { | .pv-player-box iframe { | ||
width: 100%; | |||
aspect-ratio: 16/9; | |||
border-radius: 12px; | |||
} | } | ||
</style> | </style> | ||
<!-- 脚本区 --> | |||
<script> | <script> | ||
function switchPV(el) { | 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> | </script> | ||
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>