Zobrazit videa ve znakovém jazyku

02.20 Pro neslyšící

Zdrojové CSS: /src/css/molecules/box/_deaf.scss
Zdrojové JS: /src/js/components/deaf.coffee

Defaultní

Výchozí molekula s obsahem pro neslyšící. Pro tuto molekulu slouží div.box-deaf

Jednotlivé části, které mají audio alternativu, se obalí do .box-deaf a hned na začátek se vloží odkaz pro přehrátí .box-deaf__link. Na tento element je potřeba přidat třídu .js-lightbox a dát mu atribut [data-lightbox-drag]=true, aby bylo možné s dialogem posouvat. Pro každý odkaz na přehrátí je také potřeba připravit příslušný lightbox s videem a na jeho id odkázat z [href] atributu. Video v lightboxu by mělo mít atribut [preload]=none, aby se načetlo až po otevření lightboxu.

V poslední řadě se někde umístí ikonka a.box-deaf__toggle, na kterou je navázán JavaScript, který zobrazuje ikonky s alternativním obsahem. Tato ikonka se zobrazuje fixně v pravém dolním rohu.

Volitelně je také možné přidat odkaz pro aktivaci do záhlaví. Viz html kód záhlaví této stránky.

Heading 1

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien sagittis a eleifend sed, tristique pretium, enim.

Přehrát video ve znakovém jazyku

Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

S odkazy ve videu

Varianta, která v lightboxu u videa obsahuje odkazy, které se postupně objevují v průběhu přehrávání videa.

Do lightboxu se v tomto případě vedle videa (v gridu) vloží element ul.box-deaf-links__list.crossroad-links__list a do něho jednotlivé odkazy li.box-deaf-links__link.crossroad-links__item, které mají v atributu [data-time] obsažený údaj o čase, kdy se mají objevit, ve formátu hh:mm:ss.

Přehrát video ve znakovém jazyku

Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque.