Regione Toscana Design System

Video Item: Box Player 

<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 video lorem ipsum dolor sit amet
        </h3>

        <p class="rtds-video-item__description">
            descrizione video lorem ipsum dolor sit amet
        </p>

    </div>

    <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 class="rtds-p-4">
        <a href="#" class="rtds-action-link
     rtds-card__action-link rtds-action-link--has-icon rtds-group/cta rtds-action-link--sm
">
            <span class='rtds-sr-only'>Titolo video lorem ipsum dolor sit amet - </span>Trascrizione

            <svg class="rtds-icon rtds-fill-current rtds-transition-all group-hover/cta:rtds-scale-110" aria-hidden="true" focusable="false" role="img">
                <use href="../../icons.svg#outline--document-text" />
            </svg>

        </a>
    </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",
  "heading": "Titolo video lorem ipsum dolor sit amet",
  "description": "descrizione video lorem ipsum dolor sit amet",
  "ctaLink": {
    "classes": "rtds-card__action-link rtds-action-link--has-icon rtds-group/cta",
    "iconClasses": "rtds-transition-all group-hover/cta:rtds-scale-110",
    "hasIcon": "true",
    "icon": "outline--document-text",
    "label": "<span class='rtds-sr-only'>Titolo video lorem ipsum dolor sit amet - </span>Trascrizione",
    "href": "#",
    "iconSize": ""
  }
}
  • 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

Componente Video Item

Il componente Video Item è un elemento molecolare che 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.

Markup

Il componente utilizza una struttura semantica con:

  • Un contenitore principale con classe rtds-video-item
  • Sezione opzionale per titolo e descrizione
  • Area video con iframe YouTube o player personalizzato
  • Link opzionale alla trascrizione

La struttura base del markup è:

<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]" src="[url]" ...></iframe>
    </div>
    <div class="rtds-p-4">
        <!-- Link alla trascrizione -->
    </div>
</div>

Comportamento

  • Supporta due modalità di visualizzazione: iframe YouTube e player personalizzato
  • Include supporto per titolo e descrizione del video
  • Fornisce accessibilità con attributi title appropriati
  • Gestisce il layout responsive con aspect ratio video
  • Supporta link alla trascrizione con testo descrittivo per screen reader

Accessibilità

Il componente è stato progettato seguendo le linee guida WCAG 2.1 e implementa diverse caratteristiche per garantire l’accessibilità:

Struttura Semantica

  • Utilizzo di elementi HTML5 semantici
  • Attributi title descrittivi per l’iframe
  • Supporto per trascrizioni con testo descrittivo per screen reader
  • Struttura gerarchica con heading appropriati

Attributi ARIA e Accessibilità

  • Titoli descrittivi per l’iframe
  • Testo nascosto per screen reader nel link alla trascrizione
  • Struttura semantica per titoli e descrizioni

Requisiti di Accessibilità Specifici

  • L’iframe deve avere un attributo title descrittivo del suo contenuto es Video youtube: {Titolo}
  • Il link alla trascrizione deve includere un testo descrittivo per la transizione del video, per soddisfare i requisiti di accessibilità

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

  • heading: stringa - titolo del video
  • description: stringa - descrizione del video
  • title: stringa - titolo per l’attributo title dell’iframe
  • src: stringa - URL del video YouTube o sorgente del player
  • videoFrame: booleano - se utilizzare l’iframe YouTube
  • videoPlayer: booleano - se utilizzare il player personalizzato
  • ctaLink: oggetto - configurazione del link alla trascrizione
    • classes: stringa - classi CSS per il link
    • iconClasses: stringa - classi CSS per l’icona
    • hasIcon: booleano - se mostrare l’icona
    • icon: stringa - nome dell’icona
    • label: stringa - testo del link
    • href: stringa - URL del link
    • iconSize: stringa - dimensione dell’icona

Configurazione YAML

Il file di configurazione supporta le seguenti impostazioni:

Varianti

  • default: variante base con iframe YouTube
    • videoFrame: booleano - impostato a true
  • box: variante con iframe YouTube, titolo, descrizione e link alla trascrizione
    • videoFrame: booleano - impostato a true
    • heading: stringa - titolo del video
    • description: stringa - descrizione del video
    • ctaLink: oggetto - configurazione del link alla trascrizione
  • player: variante con player personalizzato
    • videoPlayer: booleano - impostato a true
  • box-player: variante con player personalizzato, titolo, descrizione e link alla trascrizione
    • videoPlayer: booleano - impostato a true
    • heading: stringa - titolo del video
    • description: stringa - descrizione del video
    • ctaLink: oggetto - configurazione del link alla trascrizione

Note sull’implementazione

  • Il componente utilizza il sistema di classi utility per il layout e lo stile
  • Supporta due modalità di visualizzazione video: YouTube iframe e player personalizzato
  • Il player personalizzato richiede un’immagine di copertina
  • Il componente supporta la personalizzazione completa delle classi CSS
  • Le icone sono gestite attraverso il componente icon esistente