tinyvid.dev
Guida · incorporamento

Codice embed video HTML

Mettere un video su una pagina è più di una singola riga di HTML. Questa guida illustra i tre schemi di incorporamento che ti servono davvero — un player standard, un loop di sfondo in riproduzione automatica e una clip a caricamento differito — con il codice da copiare e incollare per ciascuno. Oppure trascina un file in TinyVid e li scrive tutti e tre per te.

01Le basi

L'elemento video HTML

L'elemento video nativo è tutto ciò che ti serve per incorporare un video in HTML — nessuna libreria, nessun iframe, nessun player di terze parti. Nella sua forma più semplice racchiude una o più righe source, ciascuna che punta a un file e ne indica il tipo, e il browser riproduce la prima che sa supportare.

Dai al video un width e un height espliciti, o un aspect ratio CSS, così il browser riserva lo spazio giusto e la pagina non salta mentre carica. Aggiungi un'immagine poster per il fotogramma mostrato prima della riproduzione, e l'attributo controls per un player standard. Tutto il resto — autoplay, loop, caricamento differito — è una variazione su quei pochi attributi.

02Schemi

Tre modi per incorporare un video

Quasi ogni incorporamento video sul web segue uno di questi tre schemi, e TinyVid li offre tutti e tre come preset. Ognuno arriva con i codec giusti, una sorgente di fallback e le dimensioni reali del tuo video; poi attivi riproduzione automatica, loop, controlli o anteprima finché il codice non si adatta alla tua pagina.

Player standard

Un player con controlli visibili, un poster e download progressivo. È la scelta predefinita per qualsiasi video che un visitatore decide di guardare — un tutorial, una demo di prodotto, un talk. Indica prima il piccolo file moderno e l'MP4 H.264 per ultimo così ogni browser sceglie una sorgente che sa riprodurre, e imposta preload su metadata così la clip carica solo quando qualcuno preme play.

<video poster="poster.jpg" width="1280" height="720" controls preload="metadata" style="max-width:100%;height:auto">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Sfondo hero

Una clip silenziosa e in loop che parte da sola dietro una hero o una sezione. Poiché i browser consentono la riproduzione automatica solo quando il video è silenziato, questo schema combina gli attributi muted, autoplay, loop e playsinline e usa object-fit per coprire l'area. Tienila breve e molto compressa — viene scaricata da ogni visitatore, quindi un preset Sfondo hero senza audio è la sorgente giusta.

<video poster="poster.jpg" autoplay loop muted playsinline style="width:100%;height:100%;object-fit:cover">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Lazy-load

Una clip che si scarica solo quando compare a schermo, tenendola fuori dal percorso critico. Il suo indirizzo è conservato in un attributo data e viene inserito da un piccolo script IntersectionObserver quando l'elemento si avvicina al viewport. È lo schema più comodo per le pagine con diversi video, dove caricarli tutti in anticipo rovinerebbe le prestazioni.

<video class="lazy-video" poster="poster.jpg" width="1280" height="720" data-src="video.mp4" loop muted playsinline preload="none" style="max-width:100%;height:auto"></video>
<!-- IntersectionObserver swaps data-src → src on view -->
03Provalo

Genera il tuo codice embed

Trascina un video qui sotto. TinyVid lo converte in formati pronti per il web e ti apre il generatore: scegli un preset, attiva le opzioni che ti servono e copia un codice che porta già la larghezza e l'altezza reali del tuo video — così la pagina riserva lo spazio giusto e nulla salta durante il caricamento. Gratis fino a 200 MB, senza account.

tinyvid · converter

Trascina qui il tuo video

oppure scegli un file
MP4 · MOV · AVI · MKV · WebM · GIF|Gratis fino a 200 MB
04Buone pratiche

Attributi e buone pratiche

Una manciata di attributi fa quasi tutto il lavoro. Il poster dà al player un primo fotogramma; preload impostato su metadata — o none per le clip a caricamento differito — impedisce al browser di scaricare il video prima che serva; un width e un height, o un aspect ratio, evitano lo spostamento del layout. Perché la riproduzione automatica funzioni il video deve essere silenziato, e playsinline impedisce a iOS di forzarlo a schermo intero.

Offri più di una source. Un file WebM o AV1 per primo e un MP4 H.264 per ultimo permette ai browser moderni di prendere il file piccolo mentre quelli più vecchi ripiegano con eleganza — il browser sceglie il primo tipo che sa decodificare. Indicare i codec nel type di ogni source lo aiuta a scegliere senza scaricare nulla.

Non dimenticare l'accessibilità. Aggiungi un elemento track con i sottotitoli per i contenuti parlati, e non affidarti mai alla sola riproduzione automatica per veicolare un significato. Un loop di sfondo silenziato dovrebbe essere solo decorativo — tutto ciò che un visitatore deve ascoltare va in un player standard che possa controllare.

Gli attributi del tag video in sintesi

Tutti gli attributi che probabilmente ti serviranno su un elemento video, e quando meritano il loro posto.

AttributoCosa fa
controlsMostra i comandi del browser: play, pausa, volume e barra di avanzamento. Mettilo su qualsiasi video che il visitatore debba usare; omettilo solo per i loop di sfondo decorativi.
posterImmagine mostrata prima dell'inizio della riproduzione. Senza, il player resta vuoto o prende alla cieca il primo fotogramma: è il poster a evitare che lo spazio sembri rotto mentre il video carica.
preloadQuanto scarica il browser in partenza: metadata legge solo dimensioni e durata, none rimanda tutto alla riproduzione, auto lascia che il browser scarichi il file. Usa metadata per la maggior parte dei player e none sotto la piega.
autoplayAvvia la riproduzione senza un clic. I browser lo rispettano solo su video silenziato, quindi va a braccetto con muted, ed è adatto a clip decorative, non a contenuti che qualcuno debba scegliere di guardare.
mutedAzzera l'audio in riproduzione. Indispensabile perché la riproduzione automatica funzioni. Per una clip che non deve mai avere suono, togli la traccia audio dal file stesso invece di affidarti all'attributo.
loopRiavvia la clip quando finisce. Naturale per brevi loop di sfondo, fastidioso su qualsiasi cosa con una voce narrante.
playsinlineTiene il video dentro la pagina su iOS invece di lanciarlo nel player nativo a schermo intero. Essenziale per i loop di sfondo su iPhone.
width / heightRiservano lo spazio del player prima che arrivi il file, così la pagina non salta durante il caricamento — la differenza tra un layout pulito e una penalizzazione per Cumulative Layout Shift. Un aspect-ratio in CSS fa lo stesso lavoro in modo responsive.
<source>Permette di offrire più file: il browser sceglie il primo type che sa decodificare. Metti per primo il file moderno e leggero (WebM o AV1) e lascia un MP4 H.264 per ultimo come ripiego universale.
<track>Allega i sottotitoli come file WebVTT. Aggiungilo a tutto ciò che contiene parlato: è la base dell'accessibilità e rende il contenuto ricercabile.

Un embed è veloce solo quanto il file che ha dietro. Riduci prima il tuo con la guida per comprimere video per il web.

05FAQ
01Come incorporo un video in HTML?
Usa l'elemento video nativo con una o più righe source e un'immagine poster; il browser riproduce la prima source che supporta. Non ti serve una libreria né un iframe. TinyVid scrive l'intero tag per te dal tuo file convertito.
02Come faccio partire un video in automatico come sfondo?
I browser consentono la riproduzione automatica solo quando il video non ha audio, quindi silenzialo e aggiungi gli attributi autoplay, loop e playsinline. Il preset Sfondo hero di TinyVid produce una clip silenziosa e molto compressa fatta apposta per questo, e genera il markup corrispondente.
03Perché il mio video non parte da solo?
Il motivo abituale è che non è silenziato — i browser bloccano la riproduzione automatica per tutto ciò che ha audio. Su iPhone anche un attributo playsinline mancante impedisce la riproduzione in linea. Un loop di sfondo silenziato con playsinline parte da solo su tutti i browser.
04Come faccio il lazy-load di un video?
Tieni il file fuori dal download iniziale conservandone l'indirizzo in un attributo data e impostando preload su none, poi inseriscilo con un piccolo script IntersectionObserver quando l'elemento scorre vicino al viewport. Lo snippet lazy-load di TinyVid include lo schema.
05Quale formato video dovrei incorporare?
MP4 con H.264 per la massima compatibilità, eventualmente con una source WebM o AV1 più piccola indicata per prima. Il browser scarica il primo tipo che sa riprodurre, quindi un file moderno con un fallback MP4 copre tutti.
06Serve un servizio di hosting video per incorporare un video?
No — puoi ospitare da solo il file convertito e incollare il tag direttamente nella tua pagina. Se preferisci non gestire storage e banda, il piano Hosted di TinyVid archivia il video su una CDN e ti consegna un URL embed pronto a un prezzo mensile fisso.
07Come inserisco un MP4 in HTML?
Metti il file in un elemento video e puntaci un source con type="video/mp4": è tutto ciò che serve a un MP4, e si riproduce in ogni browser. Aggiungi sopra un secondo source — un file WebM o AV1 — e i browser moderni prenderanno il file più leggero mentre l'MP4 resta come ripiego.
08Meglio il tag video o un iframe?
Usa l'elemento video quando ospiti il file tu stesso: mantieni il controllo di player, poster, peso del file e caricamento, e non viene caricato nulla di terze parti. L'iframe è quello che ti danno piattaforme come YouTube o Vimeo — più rapido da incollare, ma si porta dietro il loro player e i loro script, e la clip vive alle loro condizioni. Per un loop di sfondo o una breve clip di prodotto, ospitare da soli un file compresso è più leggero e più veloce.
09Come rendo responsive un video incorporato?
Dai al video una width del 100% e una height automatica, e imposta in CSS un aspect-ratio corrispondente alla clip, così il browser riserva lo spazio giusto a qualsiasi larghezza di schermo. Mantieni anche gli attributi width e height sul tag: comunicano le proporzioni al browser prima che arrivino CSS o file, ed è questo a evitare lo spostamento del layout.