Come fare l’embed di un video Youtube iniziando la riproduzione dove si vuole

Come fare l’embed di un video Youtube iniziando la riproduzione dove si vuole (Guide)

Pubblicato per la prima volta il: 8 Maggio 2020 - Ultimo aggiornamento: 8 Maggio 2020

Tempo di lettura: <1 minuti

Ho avuto modo in più occasioni di parlare di Youtube e delle sue possibilità di integrazione nei nostri siti web (ad esempio le sue API e le sue playlist): questa volta vorrei dedicarmi ad un problema che molti potrebbero avere riscontrato, in particolare in relazione all’embed di video all’interno di qualsiasi pagina HTML.

Di norma, infatti, cliccando sul “Codice da incorporare” sotto ogni video di Youtube si ottiene qualcosa del genere:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/_0i7dPSA_HI” frameborder=”0″ allowfullscreen></iframe>

che pero’ viene resa a video tipicamente in questo modo, cioè con un video che parte dall’inizio.

È possibile, effettuando una piccola modifica al markup, fare (almeno) altre due cose:

  1. far iniziare il video ad un minuto specifico;
  2. abilitare l’autostart, ovvero la possibilità di riprodurre il video in automatico all’apertura della pagina (trovate un esempio su questa pagina, occhio al volume del computer se siete in ufficio o se è notte fonda :-) ).

Anzitutto, per far partire il video ad un minuto specifico basta specificare il valore dell’attributo start (espresso in secondi), quindi per fare iniziare il video dei Pythons ad esempio a 1:37 (cioè 97 secondi) andremo a scrivere:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/_0i7dPSA_HI?start=97” frameborder=”0″ allowfullscreen></iframe>

mentre per aggiungere l’autoplay andremo a fare una cosa del genere (dall’inizio), usando il parametro autoplay=1:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/_0i7dPSA_HI?autoplay=1” frameborder=”0″ allowfullscreen></iframe>

(dal minuto 1:37)

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/_0i7dPSA_HI?start=97&autoplay=1” frameborder=”0″ allowfullscreen></iframe>

con il pregevole risultato finale seguente:

SMSHosting Codice PROMO: PRT96919 Servizio di SMS Marketing - Per inviare SMS promozionali a basso costo Scopri il servizio

(fonti: StackOverFlow, 12starsmedia)

Photo by webmove

Nessun voto disponibile

Che te ne pare?

Articoli più letti su questi argomenti: