Sottofondo musicale da inserire in scheda

Dark Slayer™

Posted on 26/9/2018, 13:54

User deleted

In questa guida tenterò di spiegarvi come inserire un sottofondo musicale personalizzato - col buon vecchio sistema del "video YouTube incorporato" - all'interno della vostra scheda.

PREMESSA: Poichè questa guida è rivolta principalmente ad un'utenza non troppo esperta in programmazione CSS ed iframe, mi limiterò ad elencare solo alcune delle opzioni di personalizzazione possibili (quelle più interessanti ai fini dell'utilizzo in scheda). Se l'argomento vi incuriosisce e desiderate un maggior livello di personalizzazione, QUI troverete una lista completa delle opzioni disponibili.

Iniziamo con l'analizzare il codice base:

CODICE

I parametri width, height e frameborder (modificabili a seconda delle proprie esigenze) sono espressi in pixel e si riferiscono alla larghezza, l'altezza e le dimensioni del bordo esterno rispettivamente. All'interno del parametro src dovrete invece sostituire la dicitura "ID_VIDEO_YOUTUBE" con l'ID presente nel link del vostro video. Se non capite di cosa sto parlando, semplicemente copiate la parte finale del vostro link, corrispondente alla parte cerchiata in rosso nell'esempio sotto spoiler.

SPOILER (clicca per visualizzare)

Fatto questo piccolo preambolo, possiamo passare alla parte più interessante di questa guida: le opzioni avanzate! Tra le varie opzioni messe a disposizione dalle API di YouTube troviamo, ad esempio, una simpatica funzione autoplay che consente di avviare il video in automatico, ogni qualvolta la pagina viene aperta/aggiornata. Per fare ciò bisognerà innanzitutto aggiungere la dicitura ?autoplay=1 alla fine del link presente in src e, successivamente, aggiungere il parametro allow="autoplay; encrypted-media" all'interno del tag iframe. Per chiarezza, eccovi un esempio di codice con funzione autoplay:

CODICE

Tutto qui? Niente affatto! Come già accennato in precedenza, esistono una miriade di opzioni che vi consentono di personalizzare il vostro video. In particolare, quelle che andremo ad analizzare sono le seguenti:

rel=0 (Disabilita la visualizzazione dei video correlati alla fine)

controls=0 (Nasconde i controlli del video player (Start/Pausa, Volume, Barra di Avanzamento, Impostazioni, Full Screen ecc...))

showinfo=0 (Nasconde il titolo del video)

loop=1 (Riproduce il video in continuazione)

start=X (Fa partire la riproduzione dal minuto X. Ad esempio, inserendo start=60 il video partirà dal minuto 1:00)

end=X (Termina la riproduzione del video al minuto X. Ad esempio, inserendo end=120 il video terminerà al minuto 2:00)

modestbranding=1 (Rimuove il logo di YouTube dalla barra di controllo)

Ognuna di queste opzioni può essere aggiunta al vostro video semplicemente inserendo il relativo comando alla fine di src, preceduto dal simbolo ? (se si tratta della prima opzione) o dal simbolo & se si tratta di un'opzione successiva. Facciamo qualche esempio pratico: supponiamo di voler inserire un video con le funzioni autoplay e loop attive. Il codice da utilizzare sarebbe il seguente:

CODICE

Volete che lo stesso video inizi la riproduzione dal minuto 0:10 e termini al minuto 2:40? Eccovi accontentati!

CODICE

Insomma, come avrete capito le scelte a vostra disposizione sono davvero tante. Prima di lasciarvi sbizzarrire col vostro nuovo giocattolino, voglio però svelarvi un'ultima chicca! Desiderate inserire un video musicale nella vostra scheda ma trovate antipatico il player di YouTube? Bene, eccovi un metodo semplice e collaudato per "nascondere" tale obbrobrio: Vi basterà inserire

CODICE

all'inizio del codice (prima del tag iframe) e

CODICE

</div>

alla fine, come nell'esempio seguente.

CODICE

Per il momento è tutto. Se avete dubbi e/o avete bisogno di ulteriori chiarimenti, non esitate a chiedere. Enjoy!

Edited by Dark Slayer™ - 19/10/2018, 20:48

0 replies since 26/9/2018, 13:54 74 views