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