İçerik · Video

Video

Altyazılı video ve altında dökümü. 16:9 kutu, sayfa zıplamaz.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Altyazılı Canlı örnek

Dikili Devlet Hastanesi açılış töreni, 6 Eylül 2026, 12 dakika

Döküm

Törenin tam dökümü burada durur.

HTML kodunu göster

<div class="kiris-video">
  <div class="kiris-video__kap"><video class="kiris-video__oynatici" controls preload="metadata" poster="/kiris/turk-bayragi.svg"><track kind="captions" srclang="tr" label="Türkçe" src="#"></video></div>
  <p class="kiris-video__altyazi">Dikili Devlet Hastanesi açılış töreni, 6 Eylül 2026, 12 dakika</p>
  <details class="kiris-ayrinti"><summary>Döküm</summary><p class="kiris-govde">Törenin tam dökümü burada durur.</p></details>
</div>

Ne zaman kullanılır

Kılavuz videosu ve tören kaydı için kullanın.
Sayfanın tek içeriği video olmaz. Metin de olur.

Erişilebilirlik

<track kind="captions"> ile altyazı gelir. Döküm ayrıntılar içinde durur.
Kendiliğinden başlamaz, ses açık gelmez.

Karşılanan WCAG 2.2 ölçütleri 1.2.2 1.2.3 1.4.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NL, IT, FR, CH, KR.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-video ile başlayan sınıflar