Come usare il tag video (autoplay, muted, playsinline, poster), aggiungere sottotitoli con track, creare un video di sfondo per la hero, incorporare YouTube o Vimeo in modo responsive e con caricamento lazy, più un generatore di codice embed.
Per i tuoi file usa l'elemento video: <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. L'autoplay funziona solo insieme a muted. Per YouTube o Vimeo usa un iframe con loading="lazy", un title e aspect-ratio: 16 / 9 per il dimensionamento responsive. Il generatore qui sotto scrive l'uno o l'altro per te.
Gli attributi video che userai
Scegli una sorgente nel generatore di embed, attiva le opzioni e copia un markup che include già gli attributi che si dimenticano: playsinline per gli iPhone, un title sull'iframe per gli screen reader, YouTube in modalità privacy avanzata e un box 16:9 che non si schiaccia mai. Le sezioni qui sotto trattano sottotitoli, video di sfondo, sandboxing e una facade con caricamento al clic che tiene i player pesanti fuori dal primo rendering.
I browser bloccano l'autoplay con l'audio. Aggiungi muted insieme ad autoplay, e playsinline per gli iPhone. Le modalità di risparmio dati e alcune impostazioni dell'utente possono comunque bloccarlo, quindi progetta la pagina in modo che funzioni anche con la sola immagine poster.
Rimuovi gli stili fissi di larghezza e altezza e dai all'iframe width: 100%; height: auto; aspect-ratio: 16 / 9. La proprietà aspect-ratio mantiene l'altezza proporzionata alla larghezza a ogni dimensione di schermo, sostituendo il vecchio wrapper con padding-bottom: 56.25%.
È la modalità di privacy avanzata di YouTube. Secondo YouTube, le informazioni sulla visualizzazione non vengono usate per personalizzare la navigazione dello spettatore finché non avvia il video. Per il resto l'embed funziona allo stesso modo; basta cambiare il dominio nello src.
Un attributo sandbox vuoto applica tutte le restrizioni: niente script, niente moduli, niente popup, niente navigazione della pagina principale e un'origine univoca. Poi riattivi solo ciò che serve al frame con token come allow-scripts o allow-forms. Evita di combinare allow-scripts con allow-same-origin per contenuti non affidabili.
Scrivi un file WebVTT con i cue temporizzati e aggiungi <track kind="captions" src="captions.vtt" srclang="en" label="English" default> dentro l'elemento video. Il browser aggiunge un menu dei sottotitoli ai suoi controlli. Il file deve essere servito dalla stessa origine o con CORS.
Il browser riproduce la prima sorgente che supporta, quindi metti per primo il formato più leggero e recente. Il paragrafo all'interno appare solo nei browser che non supportano affatto il video.
kind="captions" include effetti sonori e nomi di chi parla; kind="subtitles" serve per le traduzioni. default attiva il primo.
Il file inizia con WEBVTT, poi i cue con tempo di inizio e di fine seguiti dal testo. Servilo con il content type text/vtt.
Il poster e lo sfondo della hero condividono un'unica immagine, così la hero appare corretta prima che il video si carichi e quando viene nascosto per il movimento ridotto.
Attributi iframe e quando usarli
aspect-ratio mantiene la forma del frame a qualsiasi larghezza. Il dominio nocookie è la modalità di privacy avanzata di YouTube.
Vengono riattivati solo gli script e l'invio dei moduli. Il frame non può aprire popup né far navigare la tua pagina.
Finché nessuno clicca, la pagina carica una sola immagine in miniatura invece del player completo. Il pulsante lo mantiene accessibile da tastiera.
Formati video per il web (controlla caniuse per le versioni esatte usate dal tuo pubblico)
I nostri obiettivi di lavoro: 720p o 1080p, niente audio, meno di dieci secondi e al massimo qualche megabyte. -an elimina l'audio, -movflags +faststart permette di iniziare la riproduzione prima che il file finisca di scaricarsi.
File video
Altro iframe
Generatore di codice embed
Sorgente
ID o URL del video
Percorso del file video
URL dell'iframe
Titolo (letto dagli screen reader)
Immagine poster (facoltativa)
Inizia da (secondi)
Autoplay (muto)
Loop
Controlli
Non tracciare (dnt=1)
Privacy avanzata (nocookie)
Caricamento lazy
Responsive 16:9
Sandbox
Movimento in autoplay senza controlli: aggiungi un tuo pulsante di pausa così i visitatori possono fermarlo.
Markup
Copia il codice
Presentazione del prodotto
Inizia gratis · Nessuna carta di credito richiesta