Itek Developer

Programmare è arte

Play youtube videos con jquery colorbox plugin

In questo articolo vi mostrerò come utilizzare il plugin jquery colorbox. E’ un plugin che offre la possibilità di visualizzare all’interno di un browser immagini , codice html , video all’interno di una modal box. Il tutto con una grafica bella e professionale.  Le potenzialità di questo plugin sono molteplici ,  ma in questo articolo ci soffermeremo nell’analizzare come visualizzare video yuotube.   Per ulteriori informazioni su colorbox andate sul sito ufficiale  http://colorpowered.com/colorbox/. Qui troverete il link per scaricare il plugin e una serie di esempi che illustrano le potenzialità del plugin stesso.

Se decidete di fare il  download  del codice di esempio che ho creato potete evitare di scaricare il plugin dal sito in quanto è già contenuto nel progetto.

Video Tutorial

About these ads

10 risposte a “Play youtube videos con jquery colorbox plugin

  1. Web Master 31 luglio 2011 alle 16:08

    @ Submacros
    Se hai scaricato il codice puoi notare che nel file file index.html in una sezione javascript hai il seguente codice

    function getVideos() {
    $.getJSON('http://gdata.youtube.com/feeds/api/videos?author=frank2tek&alt=json-in-script&orderby=published&start-index=1&max-results=10&callback=?',
    function (data) {
    getVideosCallback(data)
    }
    );
    };

    Questa rappresenta la chiamata ajax fatta con il metodo jquery getJSON al servizio youtube che ti restituisce i dati.
    Come puoi notare alla fine dell’url nella richiesta puoi vedere &callback=?
    Nella precedente versione questo parametro non era presente. Mi è bastato aggiungere, il callback=? per fare quella che viene definita una chiamata JSONP che è appunto una tecnica crossdomain. Al parametro callback puoi anche assegnare un nome specifico. Ma nel caso del metodo getJSON ( e in generale con tutte le funzioni jquery ajax ) se si imposta il parametro callback=? i dati ricevuti potranno poi essere elaaborati da una funzione anonima come in questo caso

    function (data) {
    getVideosCallback(data)
    }

    • Submarcos 10 agosto 2011 alle 20:00

      Ok, ti ringrazio per la spiegazione, infatti dopo avevo notato il cambiamento nella chiamata ajax. Gentilissimo :)

  2. Web Master 30 luglio 2011 alle 17:01

    Potete fare nuovamente l’upload del codice. Ora dovrebbe funzionare senza problemi su tutti i browser ;)
    Ho aggiunto anche un link dove potete vedere una demo funzionante.
    Se avete problemi postate pure il problema nei commenti.

    • submarcos 31 luglio 2011 alle 10:36

      Grazie mille! Stavo infatti cercando di capire come fare questo crossdomain col javascript ma non ho molto pratica con il javascript! Grazie ancora per la disponibilità!
      Ciao ciao!

    • Submarcos 31 luglio 2011 alle 10:46

      Ah una domanda per curiosità: in che parte hai inseriro il crossdomain? Scusami l’ignoranza :)

  3. Web Master 30 luglio 2011 alle 15:08

    C’è un problema con le richieste crossdomain. In giornata risolverò il problema e metterò a disposizione il nuovo codice :)

  4. Web Master 30 luglio 2011 alle 14:12

    Caricate il progetto su un server o su un ide di sviluppo ( visual studio , eclipse , netbeans ) o su un qualsiasi server locale. Se lanciate il codice dalla cartella scaricata non funziona su tutti i browser. Ognuno di essi ha le sue restrizioni.

  5. Submarcos 30 luglio 2011 alle 12:17

    Ciao scusa una domanda, il metodo ajax purtroppo su explorer viene bloccato perchè il dominio tra js e quello di richiesta di youtube sono diversi. Avresti idea di come si risolve il problema?
    Grazie!!!!!

  6. zannino francesco 7 luglio 2011 alle 14:14

    Mi sembra molto strano.
    Io l’ho provato ora su tutti i browser e funziona benissimo. Prova a caricare il tutto su un server o su visual studio o Eclipse o qualsiasi altro ide di svluppo . E poi fammi sapere.

  7. Max 7 luglio 2011 alle 11:37

    Con firefox 5 purtroppo non funziona!!!!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

%d blogger cliccano Mi Piace per questo: