Regione Toscana Design System Design System Servizi

Video Item: Player 

<div class="rtds-video-item rtds-border rtds-border-gray-01">

    <div class="rtds-video ">
        <button type="button" class="rtds-video__play rtds-group">
            <span class="rtds-video__play-icon rtds-btn rtds-btn--icon rtds-w-16 rtds-h-16 rtds-text-white rtds-cursor-pointer rtds-rounded-full rtds-border-4">
                <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 rtds-transition-all" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--play" />
                </svg>

                <span class="rtds-sr-only">Riproduci il video: titolo video lorem ipsum dolor sit amet</span>
            </span>

            <div class="rtds-video__overlay"></div>

            <picture class="rtds-video__overlay-image">
                <img class="rtds-object-cover rtds-object-center rtds-w-full rtds-h-full" src="/images/feathers.jpg" alt="" />
            </picture>

        </button>
        <iframe class="rtds-video__iframe rtds-invisible" src="https://www.youtube.com/embed/p_rEJBW27bY" title="titolo video lorem ipsum dolor sit amet" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>

</div>
 
<div class="rtds-video-item rtds-border rtds-border-gray-01{% if classes %} {{ classes }}{% endif %}">
    {% block heading %}
    {% if heading or description %}
     <div class="rtds-video-item__heading">
        {% if heading %}
        <h3 class="rtds-video-item__title rtds-heading-3">
            {{ heading | safe }}
        </h3>
        {% endif %}
        {% if description %}
            <p class="rtds-video-item__description">
                {{ description | safe }}
            </p>
        {% endif %}
        </div>
    {% endif %}
    {% endblock heading %}
    {% block video %}
    {% if videoFrame %}
    <div class="rtds-aspect-video">
        <iframe title="Video youtube: {{ title }}" width="1167" height="656" src="{{ src }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    {% endif %}
    {% if videoPlayer %}
        {% render '@video', {videoSrc: src, videoTitle: title}, true %}
    {% endif %}
    {% endblock video %}

    {% block ctaLink %}
        {% if ctaLink %}
        <div class="rtds-p-4">
            {% render '@action-link--sm', ctaLink, true %} 
        </div>
        {% endif %}
    {% endblock ctaLink %}
   
</div>
 
{
  "title": "titolo video lorem ipsum dolor sit amet",
  "src": "https://www.youtube.com/embed/p_rEJBW27bY",
  "videoPlayer": "true"
}
  • Content: 
    .rtds-video-item iframe {
    height: 100% !important;
    width: 100% !important;
}
.rtds-video-item__heading {
    padding: var(--spacing-4);
    display: grid;
    gap: var(--spacing-2);
}
.rtds-video-item__description {
    font-size: var(--fontsize-text-sm);
}
@media (min-width: 768px) {
    .rtds-video-item__description {
        font-size: var(--fontsize-text-base);
    }
}
  • URL: /components/raw/video-item/video-item.built.css
  • Filesystem Path: components/03-molecules/video-item/video-item.built.css
  • Size: 384 Bytes
  • Content: 
    @layer components {

    .rtds-video-item iframe {
        @apply !rtds-w-full !rtds-h-full;
    }

    .rtds-video-item__heading {
        @apply rtds-p-4 rtds-grid rtds-gap-2;
    }

    .rtds-video-item__description {
        @apply rtds-text-sm md:rtds-text-base;
    }
}
  • URL: /components/raw/video-item/video-item.css
  • Filesystem Path: components/03-molecules/video-item/video-item.css
  • Size: 276 Bytes

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
  • 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.

Tasto Azione
Tab / Shift+Tab Sposta il focus sull’<iframe> e sul link alla trascrizione
Enter Attiva il link alla trascrizione

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