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


Come embeddare un video facendolo partire da un determinato minuto? àˆ molto semplice da realizzare, e qui spieghiamo come fare con tanto di esempio pratico. Ho avuto modo in più occasioni di parlare di Youtube, e delle sue possibilità  di integrazione nei nostri siti web: ad esempiom le sue API e le sue playlist.

Annuncio:

Cerchi un hosting economico per il tuo sito o blog? Tophost ti aspetta (clicca qui) – Puoi anche usare il coupon sconto esclusivo 7NSS5HAGD5UC2 per spendere di meno ;-)

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 su Condivisi e poi su Incorpora, il “Codice da incorporare” sotto ogni video di Youtube è qualcosa del genere:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ao-Sahfy7Hg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

che pero’ viene resa a video tipicamente in questo modo, ovvero con un video che parte dall’inizio (minuto 0:00).

àˆ possibile, effettuando una piccola modifica al markup HTML qui sopra (tag <iframe>), 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 NIN ad esempio a 1:37 (cioè 97 secondi) andremo a scrivere una stringa del tipo ?start=secondi alla fine dell’URL del video, ovvero:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ao-Sahfy7Hg?start=97" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

che significa embedda il video partendo da 97 secondi (1 minuto e 37 secondi) dall’inizio.

Per abilitare l’autoplay dall’inizio 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/ao-Sahfy7Hg?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

e per estendere e combinare le due cose:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ao-Sahfy7Hg?start=97&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

con il pregevole risultato finale seguente, quindi il video che inizia dal minuto 1:37 e va in autoplay:

 

(fonti: StackOverFlow, 12starsmedia)

Photo by webmove

👇 Da non perdere 👇



Trovalost esiste da 4551 giorni (12 anni), e contiene ad oggi 4132 articoli (circa 3.305.600 parole in tutto) e 20 servizi online gratuiti. – Leggi un altro articolo a caso
Privacy e termini di servizio / Cookie - Il nostro network è composto da Lipercubo , Pagare.online e Trovalost
Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
Questo sito contribuisce alla audience di sè stesso.