Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

Video YouTube in HTML


Il modo più semplice per riprodurre video in HTML è utilizzare YouTube.


Lottando con i formati video?

La conversione di video in formati diversi può essere difficile e richiedere molto tempo.

Una soluzione più semplice è consentire a YouTube di riprodurre i video nella tua pagina web.


ID video di YouTube

YouTube visualizzerà un ID (come tgbNymZ7vqY), quando salvi (o riproduci) un video.

Puoi utilizzare questo ID e fare riferimento al tuo video nel codice HTML.


Riproduzione di un video di YouTube in HTML

Per riprodurre il tuo video su una pagina web, procedi come segue:

  • Carica il video su YouTube
  • Prendi nota dell'ID video
  • Definisci un <iframe>elemento nella tua pagina web
  • Lascia che l' srcattributo punti all'URL del video
  • Usa gli attributi widthe heightper specificare la dimensione del giocatore
  • Aggiungi altri parametri all'URL (vedi sotto)

Esempio

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Riproduzione automatica di YouTube + muto

Puoi far avviare automaticamente la riproduzione del tuo video quando un utente visita la pagina, aggiungendolo autoplay=1all'URL di YouTube. Tuttavia, l'avvio automatico di un video è fastidioso per i tuoi visitatori!

Nota: nella maggior parte dei casi, i browser Chromium non consentono la riproduzione automatica. Tuttavia, l'autoplay disattivato è sempre consentito.

Aggiungi mute=1dopo autoplay=1per avviare la riproduzione del video automaticamente (ma disattivato).

YouTube - Riproduzione automatica + disattivato

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>


Playlist di YouTube

Un elenco separato da virgole di video da riprodurre (oltre all'URL originale).


Ciclo di YouTube

Aggiungi loop=1per far scorrere il tuo video per sempre.

Valore 0 (predefinito): il video verrà riprodotto una sola volta.

Valore 1: il video andrà in loop (per sempre).

YouTube - Ciclo continuo

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Controlli di YouTube

Aggiungi controls=0per non visualizzare i controlli nel video player.

Valore 0: i controlli del giocatore non vengono visualizzati.

Valore 1 (predefinito): vengono visualizzati i controlli del giocatore.

YouTube - Controlli

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>