パーツ番号 07-03-03 ・ JavaScript使用
サムネ→再生切替
クリックするとサムネイルが消え「再生中」風の疑似プレーヤー表示に切り替わります。WordPressで動画クリックの体験を軽量に再現したいときに。
プレビュー
ソースコード
HTML
<div class="d07-03-03-player">
<div class="d07-03-03-thumb">
<button class="d07-03-03-play" aria-label="再生">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<div class="d07-03-03-live">
<span class="d07-03-03-dot"></span>再生中
<div class="d07-03-03-bars"><span></span><span></span><span></span><span></span></div>
</div>
</div>CSS
.prev.d07-03-03{background:#f1f5f9}
.d07-03-03-player{position:relative;width:100%;max-width:340px;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.d07-03-03-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:linear-gradient(120deg,#f97316,#ef4444);transition:opacity .4s ease;cursor:pointer}
.d07-03-03-play{width:60px;height:60px;border:none;border-radius:50%;background:rgba(255,255,255,.9);
display:flex;align-items:center;justify-content:center;cursor:pointer}
.d07-03-03-play svg{width:26px;height:26px;fill:#ef4444;margin-left:3px}
.d07-03-03-live{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;background:#0f172a;color:#fff;font-weight:700;opacity:0;pointer-events:none;transition:opacity .4s ease}
.d07-03-03-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;margin-right:6px;
animation:d07-03-03-blink 1.2s infinite}
.d07-03-03-bars{display:flex;gap:5px;align-items:flex-end;height:30px}
.d07-03-03-bars span{width:6px;background:#38bdf8;border-radius:3px;animation:d07-03-03-eq 1s ease-in-out infinite}
.d07-03-03-bars span:nth-child(2){animation-delay:.2s}
.d07-03-03-bars span:nth-child(3){animation-delay:.4s}
.d07-03-03-bars span:nth-child(4){animation-delay:.6s}
.d07-03-03-player.playing .d07-03-03-thumb{opacity:0;pointer-events:none}
.d07-03-03-player.playing .d07-03-03-live{opacity:1;pointer-events:auto}
@keyframes d07-03-03-blink{50%{opacity:.3}}
@keyframes d07-03-03-eq{0%,100%{height:8px}50%{height:28px}}JavaScript
(function(){
var p=document.querySelector('#item-07-03-03 .d07-03-03-player');
if(!p)return;
p.addEventListener('click',function(){p.classList.toggle('playing');});
})();クラス名 .d07-03-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。