Video Item

Il componente Video Item gestisce la visualizzazione di video, supportando sia l’embedding di video YouTube che un player personalizzato. È progettato per essere accessibile e responsive, con supporto per trascrizioni e descrizioni.

Comportamento

Il componente è renderizzato come <div class="rtds-video-item">. Nelle varianti con box include <h3> (titolo) e <p> (descrizione) prima del video. Il video è incorporato tramite:

• <iframe title="..."> — video YouTube con attributo title obbligatorio
• Player <video> personalizzato (variante player)

Il link alla trascrizione, quando presente, è un <a> con <span class="rtds-sr-only"> per disambiguare link con testo identico in pagine con più video.

Varianti

Varianti di Stile

• default: Variante base con iframe YouTube
• box: Variante con iframe YouTube, titolo, descrizione e link alla trascrizione
• player: Variante con player personalizzato
• box-player: Variante con player personalizzato, titolo, descrizione e link alla trascrizione

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

• heading (stringa, opzionale): Titolo del video
• description (stringa, opzionale): Descrizione del video
• title (stringa, obbligatorio): Titolo per l’attributo title dell’iframe
• src (stringa, obbligatorio): URL del video YouTube o sorgente del player
• videoFrame (booleano, opzionale): Se true, usa l’iframe YouTube
• videoPlayer (booleano, opzionale): Se true, usa il player personalizzato

Parametri Link Trascrizione

• ctaLink (oggetto, opzionale): Configurazione del link alla trascrizione
  • classes (stringa, opzionale): Classi CSS per il link
  • iconClasses (stringa, opzionale): Classi CSS per l’icona
  • hasIcon (booleano, opzionale): Se mostrare l’icona
  • icon (stringa, opzionale): Nome dell’icona
  • label (stringa, obbligatorio): Testo del link
  • href (stringa, obbligatorio): URL del link
  • iconSize (stringa, opzionale): Dimensione dell’icona

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.2.3 Descrizione audio o media alternativo (Preregistrati) — il componente supporta un link opzionale alla trascrizione del video
• 1.3.1 Informazioni e correlazioni — la struttura semantica usa <h3> per il titolo e <p> per la descrizione; <iframe> ha un title descrittivo
• 4.1.2 Nome, ruolo, valore — l’<iframe> ha l’attributo title che descrive il contenuto del video

Struttura e semantica

• Il componente è renderizzato come <div class="rtds-video-item"> — wrapper presentazionale
• Il titolo del video è un <h3>; la sezione che contiene il video-item dovrebbe avere un heading di livello superiore
• L’<iframe> YouTube ha sempre un attributo title descrittivo (es. “Video youtube: Titolo del video”) che identifica il contenuto per le tecnologie assistive
• Il link alla trascrizione, se presente, deve includere un testo descrittivo per disambiguare lo scopo del link (es. titolo del video tramite rtds-sr-only)

Attributi ARIA

Nessun attributo ARIA aggiuntivo è presente nel markup base. Il nome accessibile dell’<iframe> è fornito dall’attributo title.

Navigazione da tastiera

Gestione del focus

• Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

• L’<iframe> viene annunciato con il contenuto dell’attributo title (es. “Video youtube: Titolo del video”)
• Il link alla trascrizione deve includere testo accessibile che specifichi il video a cui si riferisce, per disambiguare link con testo identico in pagine con più video

Esempi di utilizzo

<!-- Esempio base con iframe YouTube -->
<div class="rtds-video-item rtds-border rtds-border-gray-01">
  <div class="rtds-aspect-video">
    <iframe title="Video youtube: Titolo del video" src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
  </div>
</div>

<!-- Esempio con titolo, descrizione e trascrizione -->
<div class="rtds-video-item rtds-border rtds-border-gray-01">
  <div class="rtds-video-item__heading">
    <h3 class="rtds-video-item__title rtds-heading-3">Titolo del video</h3>
    <p class="rtds-video-item__description">Descrizione del video</p>
  </div>
  <div class="rtds-aspect-video">
    <iframe title="Video youtube: Titolo del video" src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
  </div>
  <div class="rtds-p-4">
    <a href="/trascrizione" class="rtds-action-link">
      <span class="rtds-sr-only">Titolo del video — </span>Trascrizione
    </a>
  </div>
</div>

Note

• Il player personalizzato richiede un’immagine di copertina
• Il link alla trascrizione deve includere uno <span class="rtds-sr-only"> con il titolo del video per disambiguare link con testo identico in pagine con più video
• Il titolo del video nel <h3> presuppone che la sezione contenitrice abbia un <h2> di contesto