Come includere un video sul sito in loop e autoplay
Quando si incorpora un video di YouTube in una pagina web, lo script in embed mostra un'immagine in anteprima del filmato.
Spetta poi all'utente decidere se vedere il video, cliccando sul simbolo Play, oppure no.
Come far partire il video in automatico
Per far partire il video in automatico quando l'utente visualizza la pagina web sul browser devo modificare il codice di embed aggiungendo il parametro autoplay=1.
Ad esempio, vado su YouTube e copio il codice embed di un video. Si tratta di un'istruzione iframe.
<iframe width="420" height="315" src="https://www.youtube-nocookie.com/embed/_nEWfzzWw8o" frameborder="0" allowfullscreen></iframe>
Per far partire in automatico il video aggiungo nell'indirizzo URL del video il parametro autoplay assegnandogli il valore uno ( attivazione ).
<iframe width="420" height="315" src="https://www.youtube-nocookie.com/embed/_nEWfzzWw8o?autoplay=1" frameborder="0" allowfullscreen></iframe>
Se non ci sono già altri parametri nell'indirizzo devo anche aggiungere il simbolo del punto interrogativo al termine dell'URL. Lasciando il tutto dentro le virgolette.
Quando YouTube carica la pagina web dove è incorporato il codice embed, legge il parametro nell'iframe e lo attiva.
La visualizzazione del video parte automaticamente sul browser dell'utente.
Come far ripartire il video embed quando finisce
Quando il video finisce la visualizzazione, lo spazio embed si disattiva ed eventualmente mostra un elenco di video correlati oppure torna all'immagine di anteprima.
Per far ripartire automaticamente il video dall'inizio, ossia per mandarlo in loop, devo aggiungere nel codice embed il parametro loop=1.
<iframe width="420" height="315" src="https://www.youtube-nocookie.com/embed/_nEWfzzWw8o?loop=1" frameborder="0" allowfullscreen></iframe>
Il metodo è simile al precedente, in questo caso però il parametro usato è loop anziché autoplay.
Come eseguire un video incorporato in loop e autoplay
Per combinare la partenza automatica del video al loop, posso indicare entrambi i parametri nel codice embed, separati tra loro dal simbolo & ( and ).
<iframe width="420" height="315" src="https://www.youtube-nocookie.com/embed/_nEWfzzWw8o?autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>
Così facendo ottengo entrambi gli effetti. Quando l'utente carica la pagina il video parte automaticamente ( autoplay ). Quando la visualizzazione termina, il video si resetta e riparte dall'inizio ( loop ).
A cosa serve? Quali sono le applicazioni pratiche?
Oltre a mostrare in automatico il video, la tecnica autoplay e loop può essere utilizzata per far ascoltare agli utenti una musica di sottofondo durante la lettura della pagina web senza farlo leggere dal proprio server.
Non bisogna però abusarne perché causa alcune conseguenze in termini di ottimizzazione e usabilità.
Quali sono le conseguenze?
Se l'utente vuole navigare in silenzio, la partenza in automatico dell'audio nel video può causare un forte disturbo e peggiorare la sua user experience ( UX ).
L'utente preme sul tasto back del browser per silenziare l'audio, senza continuare a leggere la pagina, e questo è un cattivo segnale per i motori di ricerca. Peggiora il posizionamento del documento sui risultati organici di ricerca.
Inoltre, la visualizzazione automatica del video implica un maggiore traffico dati durante la visualizzazione della pagine. Ne consegue una riduzione della velocità del sito web e, indirettamente, un peggioramento dell'esperienza utente.