Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Khung video

Dùng để giữ chỗ cho video mà chưa tải trình phát nặng cho đến khi có người bấm phát.

Phương tiện

Xem trước trực tiếp

Nguồn

<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; }

Cách dùng

  • Hiện ảnh bìa và nút phát trước, chỉ thay bằng trình phát khi được bấm — nhất là khi một màn hình có nhiều video
  • Ghi thời lượng ở góc dưới; không ai bấm phát khi chưa biết dài bao lâu
  • Giữ khung bằng tỉ lệ để phần bên dưới không bị đẩy xuống lúc trình phát xuất hiện

Điểm cần lưu ý

  • Nút phát chỉ có biểu tượng — hãy nêu tên video trong một span dc-sr
  • Không tự động phát, không bật tiếng sẵn; người tiết kiệm dữ liệu sẽ bỏ đi trước

Tiếp theo