भिडियो ठाउँ

भिडियो आउने खाना पहिले छुट्याइदिने र कसैले नथिच्दासम्म गह्रौं प्लेयर नबोलाउने टुक्रा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

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

कसरी प्रयोग गर्ने

पहिले कभर तस्बिर र प्ले बटन मात्र देखाउनु, थिचेपछि प्लेयर राख्नु — एउटै पर्दामा धेरै भिडियो हुँदा विशेष गरी
लम्बाइ तल्लो कुनामा लेख्नु; कति लामो हो थाहा नभए कोही थिच्दैन
खाना अनुपातले छुट्याउनु — प्लेयर आउँदा तलको सामग्री तल धकेलिन्न

ध्यान दिनुपर्ने कुरा

प्ले बटनमा आइकन मात्र छ — कुन भिडियो बज्छ भनी dc-sr मा लेख्नु
स्वतः प्ले र आवाज नखोल्नु — डेटा बचाउने मान्छे पहिले छोड्छन्

अर्को

तेर्सो क्यारोसेल मिडिया एप

तस्बिर हेडर मिडिया एप

थम्बनेल पट्टी मिडिया एप

तस्बिर ग्रिड मिडिया एप