パーツ番号 07-03-01 ・ CSSのみ

16:9レスポンシブ動画枠

アスペクト比を16:9で固定した動画プレースホルダー。中央の再生ボタンにマウスを乗せると拡大します。WordPressの記事内に動画埋め込み枠を差し込む用途に。

css

プレビュー

ソースコード

HTML

<div class="d07-03-01-wrap">
          <div class="d07-03-01-frame">
            <button class="d07-03-01-play" aria-label="再生">
              <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>
        </div>

CSS

.prev.d07-03-01{background:#eef1f7}
        .d07-03-01-wrap{width:100%;max-width:360px}
        .d07-03-01-frame{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;
          background:linear-gradient(135deg,#4f46e5,#9333ea 60%,#ec4899);box-shadow:0 12px 30px rgba(79,70,229,.3)}
        .d07-03-01-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border:none;border-radius:50%;
          background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center;
          transition:transform .3s ease,box-shadow .3s ease}
        .d07-03-01-play svg{width:28px;height:28px;fill:#4f46e5;margin-left:3px}
        .d07-03-01-frame:hover .d07-03-01-play{transform:scale(1.18);box-shadow:0 8px 20px rgba(0,0,0,.25)}

クラス名 .d07-03-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。