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.
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:
- far iniziare il video ad un minuto specifico;
- 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)
👇 Da non perdere 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat 🏴
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni artificiali 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🟠 10 guide e riferimenti utili per sviluppatori WordPress
- 🟡 Errore 14 Roomba: cos’è e come risolvere
- 🔵 Consulenti su Facebook come se fosse antani