Pubblicato il 19/08/13e aggiornato il

Come aprire un popup con un video di Youtube cliccando su un link.

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

id-video-youtube

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>

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

video-finestra-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.




6 commenti :

  1. Grazie Ernesto! :D Questo tutorial mi sarà molto utile!!! :)
    Se tu non esistessi, bisognerebbe inventarti!!!

    RispondiElimina
  2. Ernesto, buongiorno. Volevo chiederti un parere personale:
    se 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.

    RispondiElimina
  3. Ottimo... funziona perfettamente su PC. Peccato non si possa dire lo stesso per smartphone e tablet. Esiste una soluzione alternativa?

    RispondiElimina
    Risposte
    1. Dipende 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

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.