Come mostrare un popup con un video di Youtube cliccando su un link. Questo funziona su Blogger o anche con altre piattaforme.
Mi è stata posta la questione su come si possa aprire una finestra popup di un video di Youtube cliccando semplicemente su un link. Esistono dei plugin che svolgono proprio questa funzione e che si basano su JQuery ma non è agevole usarli in Blogger soprattutto dopo che sono state modificate le API di Youtube. Con tali plugin si mette in primo piano il video di Youtube con un effetto simile al Lightbox di Blogger. Vi potete fare una idea di queste personalizzazioni consultando il post sull'Effetto Shadowbox che può essere usato anche per gallerie di video di Youtube e Vimeo.
Rimanendo sul semplice vediamo come si possa aprire una finestra popup del browser con un video di Youtube in modo da poterlo visualizzare nella pagina con il link e senza implementare tutto il suo codice. Per prima cosa bisogna andare su Youtube e ricavare gli ID dei video che vogliamo implementare con questo metodo. Basta copiare l'ultima parte del loro indirizzo nella barra del browser
Per implementare uno o più video si apre l'Editor di Blogger, si va su HTML quindi si incolla questo codice
<script type="text/javascript">
function apri_popup(popurl){
var winpops=window.open(popurl,"","top=300, left=150, width=560, height=315, status=no, menubar=no, toolbar=no, scrollbars=no")
}
</script>
<a href="javascript:apri_popup('//www.youtube.com/v/IcrbM1l_BoI')">Clicca per aprire il video</a>
function apri_popup(popurl){
var winpops=window.open(popurl,"","top=300, left=150, width=560, height=315, status=no, menubar=no, toolbar=no, scrollbars=no")
}
</script>
<a href="javascript:apri_popup('//www.youtube.com/v/IcrbM1l_BoI')">Clicca per aprire il video</a>
Oltre all'ID del video colorato di viola possono essere settate le dimensioni del popup (560 e 315) e la posizione relativa in cui deve aprirsi (300 pixel dalla parte alta e 150 pixel dalla sinistra). Ovviamente al posto dell'anchor text colorato di blu si può mettere un qualsiasi altro testo o una immagine
<img src="URL_IMMAGINE" alt="nome-immagine" title="clicca per riprodurre il video">
Il codice precedente può essere incollato al posto dell'espressione in blu dopo essere stato personalizzato. In uno stesso post possono essere inseriti più link ai video di Youtube con questo codice
<a href="javascript:apri_popup('//www.youtube.com/v/ID_Video)">Link visibile</a>
Il javascript evidenziato di giallo è sufficiente inserirlo una sola volta. Ecco come si presenta il popup
Ho pubblicato in rete una dimostrazione del funzionamento di questo hack
Se si vogliono linkare parecchi video di Youtube e se si vuole che i lettori li guardino senza lasciare il nostro sito si tratta di una soluzione che lascia il layout del sito praticamente intatto.
Grazie Ernesto! :D Questo tutorial mi sarà molto utile!!! :)
RispondiEliminaSe tu non esistessi, bisognerebbe inventarti!!!
Ernesto, buongiorno. Volevo chiederti un parere personale:
RispondiEliminase mettessi nella sidebar del blog un video di youtube che parte in automatico (senza premere play) ogni qualvolta un utente visualizza una qualsiasi pagina del blog, questo rallenterebbe di parecchio la velocità del sito?
Grazie.
Decisamente sì
Elimina@#
Ok, allora evito. Grazie.
EliminaOttimo... funziona perfettamente su PC. Peccato non si possa dire lo stesso per smartphone e tablet. Esiste una soluzione alternativa?
RispondiEliminaDipende dallecaratteristiche del browser che si usa da tablet o da smartphone. È evidente che per queste funzionalità ci vogliono browser che permettano i javascript e in genere non succede
Elimina@#