Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Video placeholder

For holding the slot a video will fill, without loading a heavy player until someone presses play.

Media

Live preview

Source

<figure class="dc-video-figure">
  <div class="dc-video">
    <button type="button" class="dc-video__play">
      <svg class="dc-video__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 5.2v13.6L19 12 8 5.2Z" fill="currentColor" /></svg>
      <span class="dc-sr">안전교육 3분 요약 재생</span>
    </button>
    <span class="dc-video__time">3:24</span>
  </div>
  <figcaption class="dc-video__cap">
    <strong>안전교육 3분 요약</strong>
    자막 한국어 · 베트남어 · 네팔어
  </figcaption>
</figure>
.dc-video-figure { margin: 0; max-width: 480px; font-family: var(--dc-font); }
.dc-video {
  /* 가림막은 밝은 모드에서도 어둡다. --dc-text-on 은 다크 모드에서 검어지므로 여기엔 쓸 수 없다 */
  --dc-on-media: white;
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border-radius: var(--dc-r-md);
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-brand) 34%, var(--dc-sunken)),
    color-mix(in srgb, var(--dc-text) 22%, var(--dc-sunken)));
}
.dc-video__play {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  padding: 0; border: 0;
  border-radius: var(--dc-r-full);
  background: var(--dc-overlay);
  color: var(--dc-on-media);
  cursor: pointer;
  transition: transform var(--dc-fast);
}
.dc-video__play:hover { transform: scale(1.06); }
.dc-video__icon { width: 26px; height: 26px; margin-left: 3px; }
.dc-video__time {
  position: absolute; right: var(--dc-2); bottom: var(--dc-2);
  padding: 2px var(--dc-2);
  border-radius: var(--dc-r-xs);
  background: var(--dc-overlay);
  color: var(--dc-on-media);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.dc-video__cap {
  margin-top: var(--dc-2);
  font-size: 12px; line-height: 1.5; color: var(--dc-text-mute);
}
.dc-video__cap strong { display: block; font-size: 14px; color: var(--dc-text); }
.dc-video--portrait { aspect-ratio: 9 / 16; max-width: 240px; max-height: 70vh; }

How to use it

  • Show the poster and a play button first, swap in the player on press — especially with several videos on one screen
  • Put the running time in the lower corner; nobody presses play without knowing the length
  • Reserve the box by ratio so nothing below it jumps when the player arrives

Watch out for

  • The play button is icon-only — name the video it plays in a dc-sr span
  • No autoplay, no sound on load; the people counting their data leave first

Next