← 動的パーツギャラリーへ戻る

パーツ番号 07-03-03 ・ JavaScript使用

サムネ→再生切替

クリックするとサムネイルが消え「再生中」風の疑似プレーヤー表示に切り替わります。WordPressで動画クリックの体験を軽量に再現したいときに。

clickjs

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。