Video Gallery

Sezione con griglia di elementi video, con titolo intestazione e layout responsive a 2 colonne.

Comportamento

Il componente viene renderizzato come <section class="rtds-video-gallery"> con un intestazione (@section-header) e una griglia di 4 elementi video (@video-item). La variante --box usa la versione boxed degli elementi video (@video-item--box).

Varianti

• default: Griglia di video in formato standard (@video-item)
• box: Griglia di video in formato boxed (@video-item--box)

Dipendenze

• @section-header--divider-left — intestazione sezione con divisore
• @video-item — singolo elemento video (variante default)
• @video-item--box — singolo elemento video in formato boxed (variante box)

Stili CSS

Classi Base

• .rtds-video-gallery: Sezione contenitore

Struttura layout

• Griglia: grid-cols-1 su mobile, grid-cols-2 da md
• Gap tra elementi: gap-4
• Spaziatura verticale interna: space-y-4 (mobile), space-y-6 da md

Classi elemento video

• .rtds-video-item: Wrapper iframe — aspect-video per proporzione 16:9
• L’iframe interno ha width: 100% e height: 100% forzati

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — la galleria è una <section> con intestazione e lista <ul> semantica
• 1.1.1 Contenuti non testuali — gli iframe video devono avere title descrittivo tramite videoTitle
• 2.1.1 Tastiera — il pulsante play di ogni @video-item deve essere raggiungibile e attivabile da tastiera

Struttura e semantica

• Il componente è renderizzato come <section class="rtds-video-gallery"> — identifica la sezione come regione autonoma
• L’intestazione “Video” è resa tramite @section-header--divider-left e identifica la sezione
• La lista di video è una <ul> — struttura semantica corretta per una collezione di elementi

Screen reader

• Ogni @video-item deve avere videoTitle descrittivo — è usato come title sull’iframe e come testo del <span class="rtds-sr-only"> nel pulsante play ("Riproduci il video: ")
• Gli screen reader annunciano il pulsante play con il titolo del video

Esempi di utilizzo

<!-- Galleria video standard -->
<section class="rtds-video-gallery">
  <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div>
      <!-- @section-header--divider-left -->
    </div>
    <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 rtds-gap-4">
      <li>
        <div class="rtds-video-item">
          <iframe
            title="Titolo del video"
            src="https://www.youtube.com/embed/..."
            allowfullscreen
          ></iframe>
        </div>
      </li>
      <!-- altri elementi -->
    </ul>
  </div>
</section>

<section class="rtds-video-gallery">
    <div class="rtds-container rtds-space-y-4 md:rtds-space-y-6">
    <div>
        <div class="rtds-section-header">
    <div class="rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
        <div class="rtds-flex rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
            
                <div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
    <img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>

            
            <h2 class="rtds-heading-3 md:rtds-heading-2">Video</h2>
            
            
            
        </div>

        
            
        
    </div>
</div>
    </div>
    <ul class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 rtds-gap-4">
        
            <li>
                
    <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-aspect-video">
        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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>


            </li>
        
            <li>
                
    <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-aspect-video">
        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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>


            </li>
        
            <li>
                
    <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-aspect-video">
        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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>


            </li>
        
            <li>
                
    <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-aspect-video">
        <iframe title="Video youtube: titolo video lorem ipsum dolor sit amet" width="1167" height="656" src="https://www.youtube.com/embed/p_rEJBW27bY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 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>


            </li>
        
        </ul>
    </div>
</section>