Componente

Video

Video nativi con controlli del browser, sottotitoli WebVTT e trascrizione in un pannello richiudibile; video di YouTube dietro l'avviso di consenso di bootstrap-italia.

Riferimento: <it-video>
Classi: ita-videoita-video-4-3ita-video-1-1ita-video-21-9ita-video-embedita-video-consentita-video-transcript
Basato su (daisyUI): collapsecollapse-arrowbtn
Solo CSS: Il player è il <video> nativo: controlli, tastiera, schermo intero e sottotitoli (<track kind="captions">) sono del browser, senza librerie (dev-kit-italia usa video.js). Le proporzioni sono 16:9, oppure ita-video-4-3, -1-1, -21-9. Per i video di terze parti l'iframe non è nella pagina finché l'utente non accetta: senza JavaScript l'avviso offre il link al sito originale, oppure il server rende l'iframe se il consenso è già in un cookie. Il pulsante «Accetta» richiede JavaScript: vedi sotto.
Storybook: Apri le storie di Video

Video con sottotitoli

Attiva i sottotitoli dal menu del player.

Un fiore in primavera

Trascrizione

Un fiore si apre al sole. Un'ape si posa sui petali e poi riparte.

Mostra il codice HTML

<figure class="ita-video">
  <video controls preload="metadata" playsinline aria-label="Un fiore in primavera">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    <track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A00%3A00.000%20--%3E%2000%3A02.500%0AUn%20fiore%20si%20apre%20al%20sole.%0A%0A00%3A02.500%20--%3E%2000%3A05.000%0AUn'ape%20si%20posa%20sui%20petali.%0A" srclang="it" label="Italiano" default>
    <p>Il tuo browser non riproduce video: <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">scarica il video</a>.</p>
  </video>
  <figcaption>Un fiore in primavera</figcaption>
  <details class="collapse collapse-arrow ita-video-transcript">
    <summary class="collapse-title">Trascrizione</summary>
    <div class="collapse-content"><p>Un fiore si apre al sole. Un'ape si posa sui petali e poi riparte.</p></div>
  </details>
</figure>

Proporzioni

4:3

1:1

Mostra il codice HTML

<div class="grid gap-6 md:grid-cols-2">
<figure class="ita-video ita-video-4-3">
  <video controls preload="metadata" playsinline aria-label="4:3">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    <p>Il tuo browser non riproduce video: <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">scarica il video</a>.</p>
  </video>
  <figcaption>4:3</figcaption>
</figure>
<figure class="ita-video ita-video-1-1">
  <video controls preload="metadata" playsinline aria-label="1:1">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    <p>Il tuo browser non riproduce video: <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">scarica il video</a>.</p>
  </video>
  <figcaption>1:1</figcaption>
</figure>
</div>

YouTube con consenso

Senza JavaScript resta il link a YouTube; con il frammento qui sotto «Accetta e guarda» carica il video.

Centrato l'obiettivo PNRR: le PA locali verso il cloud

Trascrizione

Trascrizione del video del Dipartimento per la trasformazione digitale sulla migrazione al cloud delle amministrazioni locali.

Mostra il codice HTML

<figure class="ita-video">
  <div class="ita-video-embed">
    <div class="ita-video-consent" style="background-image:url('https://i.ytimg.com/vi/_0j7ZQ67KtY/hqdefault.jpg')" data-video-consent data-youtube-id="_0j7ZQ67KtY" data-title="Centrato l'obiettivo PNRR: le PA locali verso il cloud">
      <div>
        <p>Contenuto di terze parti</p>
        <p>Il video è ospitato da YouTube, che potrebbe raccogliere dati sulla tua navigazione. Per vederlo qui accetta i cookie di YouTube, oppure aprilo sul sito originale.</p>
        <div>
          <button type="button" class="ita-btn ita-btn-primary ita-btn-xs" data-video-accept>Accetta e guarda</button>
          <a href="https://www.youtube.com/watch?v=_0j7ZQ67KtY" class="ita-btn ita-btn-primary ita-btn-outline ita-btn-xs" target="_blank" rel="noopener">Guarda su YouTube<svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,3v6h-1V4.7l-7.6,7.7l-0.8-0.8L19.3,4H15V3H21z M17,19.5c0,0.3-0.2,0.5-0.5,0.5h-12C4.2,20,4,19.8,4,19.5v-12 C4,7.2,4.2,7,4.5,7H12V6H4.5C3.7,6,3,6.7,3,7.5v12C3,20.3,3.7,21,4.5,21h12c0.8,0,1.5-0.7,1.5-1.5V12h-1V19.5z" /></svg><span class="sr-only"> (si apre in una nuova scheda)</span></a>
        </div>
      </div>
    </div>
  </div>
  <figcaption>Centrato l'obiettivo PNRR: le PA locali verso il cloud</figcaption>
  <details class="collapse collapse-arrow ita-video-transcript">
    <summary class="collapse-title">Trascrizione</summary>
    <div class="collapse-content"><p>Trascrizione del video del Dipartimento per la trasformazione digitale sulla migrazione al cloud delle amministrazioni locali.</p></div>
  </details>
</figure>

Con JavaScript (opzionale)

La ricetta è solo CSS e funziona così com'è. Questi frammenti non sono inclusi nel pacchetto: mostrano come aggiungere il comportamento che richiede uno script, in JavaScript semplice o in React.

Pulsante «Accetta e guarda»js

Sostituisce l'avviso con l'iframe e ricorda la scelta.

// "Accetta e guarda": swap the overlay for the iframe, and remember the choice.
const KEY = "consenso-youtube";
function loadVideo(overlay) {
  const iframe = document.createElement("iframe");
  iframe.src = `https://www.youtube-nocookie.com/embed/${overlay.dataset.youtubeId}?autoplay=1`;
  iframe.title = overlay.dataset.title;
  iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
  iframe.allowFullscreen = true;
  overlay.replaceWith(iframe);
}
document.querySelectorAll("[data-video-consent]").forEach((overlay) => {
  if (localStorage.getItem(KEY) === "si") return loadVideo(overlay);
  overlay.querySelector("[data-video-accept]").addEventListener("click", () => {
    localStorage.setItem(KEY, "si");
    document.querySelectorAll("[data-video-consent]").forEach(loadVideo);
  });
});

Componente Reacttsx

import { useEffect, useState } from "react";

const KEY = "consenso-youtube";

/** YouTube behind a consent overlay; the iframe exists only after consent. */
export function ConsentVideo({ youtubeId, title }: { youtubeId: string; title: string }) {
  const [ok, setOk] = useState(false);
  useEffect(() => setOk(localStorage.getItem(KEY) === "si"), []);
  const accept = () => { localStorage.setItem(KEY, "si"); setOk(true); };
  return (
    <figure className="ita-video">
      <div className="ita-video-embed">
        {ok ? (
          <iframe title={title} allowFullScreen
                  src={`https://www.youtube-nocookie.com/embed/${youtubeId}`}
                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" />
        ) : (
          <div className="ita-video-consent"
               style={{ backgroundImage: `url(https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg)` }}>
            <div>
              <p>Contenuto di terze parti</p>
              <p>Il video è ospitato da YouTube, che potrebbe raccogliere dati sulla tua navigazione.</p>
              <div><button type="button" className="ita-btn ita-btn-primary ita-btn-xs" onClick={accept}>Accetta e guarda</button></div>
            </div>
          </div>
        )}
      </div>
      <figcaption>{title}</figcaption>
    </figure>
  );
}