Qatlamlar · compound
Video dialog
Muqova rasm va öynatiş tugmasi (4.83): bosilganda video modal oynada (native dialog) oçiladi va özi boşlanadi, yopilganda töxtaydi. Video manbasi faqat oçilganda yuklanadi (iframe data-src yoki video preload="none") — sahifa yengil qoladi. Esc, fon yoki «Yopiş» bilan yopiladi, fokus muqovaga qaytadi. Landing sahifasidagi «2 daqiqada tanişuv» videosi uçun.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-ratio | 9/16 vertikal (reels, shorts) | 16/9 |
Anatomiya
- root
.fx-videodialogşart - cover
.fx-videodialog__coverşart - play
.fx-videodialog__playixtiyoriy - caption
.fx-videodialog__captionixtiyoriy - dialog
.fx-videodialog__dialogşart - close
.fx-videodialog__closeixtiyoriy - frame
.fx-videodialog__frameşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Boʻsh joy (muqovada) | Videoni oynada oçadi |
| Esc | Yopadi, video töxtaydi, fokus muqovaga qaytadi |
| Tab | Oyna içida qoladi |
Muqova — haqiqiy button (aria-label: nomi va davomiyligi), modal — native dialog (fokus içida qamaladi, Esc yopadi, fokus muqovaga qaytadi). iframe'ga title şart. Video yopilganda manba olib taşlanadi — ovoz fonda davom etmaydi. reduced-motion'da <video> özi boşlanmaydi.
Naqş: WAI-ARIA APG dialog-modal
Kod
AI uçun: qaçon işlatiladi
- Landing hero blokida mahsulot tanişuv videosi.
- Yordam markazida «qanday qilinadi» videolari.
- Sahifada joyida öynatiş, boşqaruv bilan →
videoplayer - Rasmlarni kattalaştirib köriş →
lightbox - Videoni sahifa oçilganda avtomatik boşlamang — faqat bosilganda.
- Muhim ma'lumotni faqat videoda bermang — matn yoki subtitr ham bölsin.
- Muqovaga «Play» belgisisiz rasm qöymang — bosiladigani körinib tursin.
npx foxui add videodialog
<div class="fx-videodialog" data-fx-videodialog style="max-inline-size:40rem">
<button class="fx-videodialog__cover" type="button" commandfor="vd-tanishuv" command="show-modal" aria-label="Videoni köriş: CRM bilan 2 daqiqada tanişuv, 2:14">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201280%20720%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(215%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(245%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221280%22%20height%3D%22720%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22640%22%20y%3D%22374%22%20font-family%3D%22sans-serif%22%20font-size%3D%2280%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ECRM%20bilan%20tanishuv%3C%2Ftext%3E%3Ctext%20x%3D%22640%22%20y%3D%22464%22%20font-family%3D%22sans-serif%22%20font-size%3D%2245%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%20opacity%3D%22.8%22%3E2%20daqiqada%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="1280" height="720">
<span class="fx-videodialog__play" aria-hidden="true"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M232.4 114.49 88.32 26.35a16 16 0 0 0-16.2-.3A15.86 15.86 0 0 0 64 39.87v176.26A15.94 15.94 0 0 0 80 232a16.07 16.07 0 0 0 8.36-2.35l144.04-88.14a15.81 15.81 0 0 0 0-27Z"/></svg></span>
<span class="fx-videodialog__caption">2:14 · CRM bilan tanişuv</span>
</button>
<dialog class="fx-videodialog__dialog" id="vd-tanishuv" aria-label="CRM bilan 2 daqiqada tanişuv">
<form method="dialog" class="fx-videodialog__close"><button><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>Yopiş</button></form>
<div class="fx-videodialog__frame"><iframe data-src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ" title="CRM bilan tanişuv" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
</dialog>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-surface --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-color-black --fx-color-white --fx-control-h-lg --fx-ease-enter --fx-ease-exit --fx-ease-spring --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-base --fx-motion-exit-base --fx-motion-press --fx-motion-scale-enter --fx-motion-slow --fx-radius-circle --fx-radius-overlay --fx-radius-pill --fx-radius-surface --fx-shadow-lg --fx-shadow-md --fx-size-icon-lg --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-8 --fx-text-on-brand --fx-text-primary