LightBox per video by VideoBox

VideoBox è un’evoluzione del javascript LightBox ( Leggi Articolo su SyGy ); Se non conoscete LightBox, questo script ci permetteva di avviare una presentazione di immagini oscurando la pagina madre e facendo visualizzare le immagini cliccate al centro del browser, tutto grazie solamente al CSS & al JavaScript .

Snap Shot VideoBox Logo

VideoBox invece di far visualizzare le immagini al centro del browser, ci farà visualizzare il player video dei più famosi Video-Hosting come YouTube, Google Video, MetaCafe, iFilm. Quindi grazie a questo leggerissimo script ( solo 6Kb ) potremmo far visualizzare qualunque video oscurando la pagina madre e facendolo avviare al centro del browser. Questo script può essere molto utile, quando non vogliamo far appesantire la pagina madre facendo incorporare il player video; invece utilizzando questo script non appesantiremo la pagina perchè il player video verrà caricato solamente all’apertura del link, che naturalmente può essere testuale o un’immagine o qualunque altra cosa.

Una volta scaricato l’intero script per inserirlo nelle nostre pagine basterà copiare tra i tag <head></head> questi codici:
<script src=”https://www.sygy.it/wp-admin/js/mootools.js” type=”text/javascript”>
<script src=”https://www.sygy.it/wp-admin/js/swfobject.js” type=”text/javascript”>
<script src=”https://www.sygy.it/wp-admin/js/videobox.js” type=”text/javascript”>
<link rel=”stylesheet” href=”css/videobox.css” type=”text/css” media=”screen” />

Invece dovremmo creare un link del genere per far apparire l’animazione per la visualizzazione del player video:
<a href=”url_video” rel=”vidbox” title=”titolo del video”>Vedi il Video</a>

Qualunque link può essere adattato basterà solamente inserire il tag interno ( rel=”vidbox” ), questo perchè è proprio quel tag interno che dice al browser di avviare la presentazione CSS & Javascript per visualizzare quel determinato link all’interno della schermata VideoBox.

Inserendo il tag interno ( title=”titolo del video” ) diremmo allo script di inserire quel testo scritto fra le virgolette come nome del video da visualizzare sotto. Quindi oltre al video potremmo far visualizzare anche una stringa di testo dove potremmo descrivere il video o solamente scrivere il suo titolo.

Oltre ai noti player video, VideoBox supporta anche l’esecuzione di un’animazione FLASH qualsiasi, può essere un video, un gioco, un file audio o qualunque altra cosa, l’importante che sia codificata nello standard FLASH e quindi con estensione .swf. Dunque potremmo creare una pagina con moltissimi link a giochi online in FLASH senza appesantire la pagina facendo inglobare al interno decine e decine di player FLASH.

Lo script è personalizzabile in quanto potremmo scegliere noi stessi le dimensioni del player video. Questo grazie alla modifica del tag interno ( rel=”vidbox” ) in ( rel=”vidbox 800 600″ ) dove 800 sta per la larghezza & 600 sta per l’altezza; questi due numeri sono personalizzabili ai fini delle dimensioni del nostro player video, ricordo che le dimensioni sono espresse in pixel.

Come in LightBox una volta che l’animazione della pagina è partita quindi sarà oscurata la pagina madre e verrà visualizzato il player video, per uscire dalla visualizzazione basterà cliccare su un punto esterno al player o semplicemente cliccare sul pulsante “Close” che verrà visualizzato sotto al player ed a destra del titolo scelto.

Potremmo far iniziare la riproduzione della presentazione e quindi del player video anche sotto una funzione JavaScript con il seguente codice:
Videobox.open(“url video”,”titolo”,”vidbox largchezza altezza”);

Per avere degli esempi su come verrà eseguito lo script una volta che apriremo il link basterà cliccare sulle immagini di Demo nel sito VideoBox.

Per concludere…
Questo è un’ottimo script per visualizzare un player FLASH all’interno di una bellissima presentazione realizzata interamente in CSS & JavaScript. Questo metodo esalterà la qualità del sito Web e quindi anche del WebMaster. Uno script indispensabile per realizzare pagine di video Flash i quali senno appesantirebbero troppo le pagine in questione.

Potrebbero interessarti anche...

23 risposte

  1. chiara ha detto:

    .. un piccolo aiutino…
    Innanzitutto grazie per la spiegazione chiarissima!

    Sto inserendo inun sito la VideoBox, in alcune pagine però avevo già inserito la galleria SmoothGallery.

    Su ie non ho nessun problema, mentre su firefox e su safari la videobox sta dietro la galleria SmoothGallery!

    Cosa poso fare???
    Grazie

  2. Peppino ha detto:

    Un grande aiuto. Ho inserito videobox a questo indirizzo http://www.villacortese.net/video.htm ma non riesco a vedere il bottoncino di chiusura ed il titolo. Dov’è l’arcano? Grazie per l’aiuto. Cordiali saluti, peppino

  3. SyGy88 ha detto:

    Allora, caro Peppino.
    Ho visto il codice HTML del tuo sito ed non hai inserito il codice nel giusto posto.
    Allora i codici che richiamano i “JS” & “CSS“, cioè questo:

    Non sono inseriti all’interno dei tag < head> ma tra i tag < body>, e quindi l’HTML non è formattato in modo giusto.
    Il bottoncino di chiusura si vede ma poi viene coperto dal video, questo è un sintomo che il CSS dello script non viene caricato nel giusto modo. Inoltre ricordati che il titolo va inserito con il tag interno “Title“, nelle tue pagine ancora hai scritto “Caption“.
    Inserisci i codici che ti ho scritto sopra nel giusto posto e poi dovresti vedere tutto bene.
    Fammi sapere se riesci!
    Ciao Peppino! 😉

  4. Peppino ha detto:

    tutto ok. Grazie tante per il suggerimento, funziona tutto. Nel rifare il sito ho dimenticato questo particolare inportante. Complimenti per il sito. Ciao

  5. SyGy88 ha detto:

    Ok Peppino! E si a volte si dimenticano queste sottigliezze quando si sta aggiornando un sito da 0!
    Grazie per i complimenti!
    Ciao Peppino!
    Per altri problemi, sono QUI!

  6. luis ha detto:

    ciao a tutti,
    ho inserito videobox nel mio sito ma all’apertura della pagina mi da un errore:
    “Impossibile aprire sito internet!
    Chiudere la pagina”

    cosa potrebbe essere?

  7. SyGy88 ha detto:

    Ma questo messaggio dove ti viene scritto? all’interno del browser, quando vai sulla pagina in qui hai inserito lo script VideoBox?

  8. andrew ha detto:

    Ottimo script. Pensavo non funzionasse perchè uso anche il lightbox nella stessa pagina..invece tutto OK! (o quasi): infatti non riesco a inserire una immagine invece del link testuale. In particolare, l’immagine del video Youtube. HELP!

  9. Mario ha detto:

    Non riesco a farlo funzionare: mi apre la pagina di youtube corrispondente al video. 😯

  10. SyGy88 ha detto:

    @Mario:Ciao mario, scusa per il ritardo ma in questi giorni ho avuto qualche problema a connettermi, Comunque puoi far vedere qualche esempio cioè magari una pagina prova dove si nota questo problema. Ha inserito tutti i codici che richiamano i javascript?
    Fammi sapere ok? ciao ciao

  11. Mario ha detto:

    Stasera parto per la sardegna, ma sarà mia premura disturbarti appena torno. 🙄
    Io uso wordpress e volevo infilare i link ai video in un widget sulla barra destra. Non so se la procedura è sbagliata, credo che un link sia un link ovunque si trovi… sì: i codici li ho messi tutti, ho anche provato a configurarli con un indirizzo preciso seguendo il tuo esempio, ma il risultato è sempre lo stesso, funzionano come un link “normale”, aprendo la pagina corrispondente al video.
    Per adesso ti auguro una buona estate, a presto, e grazie per l’attenzione.
    M.

  12. paolo ha detto:

    Ciao SyGy88 e complimenti per il sito. Ho un bel problemone con il mio sito. Ho nella stessa pagina sia lightbox che videobox. Se “commento” il codice lightbox mi appare il video dietro la pagina… se invece lo abilito mi parte un link normale e mi viene caricata la pagina di youtube nella stessa pagina! Ho caricato tutti i file nelle apposite cartelle e controllato percorsi e codici, ma nulla. La pag di es è questa: dal sito vai a Videografie–>Le videografie ufficiali e in basso alla pagina ci sono due link (quello di sx). Grazie in anticipo. Paolo

  13. SyGy88 ha detto:

    @paolo: Ciao, grazie per i complimenti che sono sempre ben accettati.
    Io sono andato alla pagina delle videografie, clicco su di uno link all’interno della lista e mi carica il VideoBox con sfondo bianco senza quindi video al suo interno. Sono andato a vedere il codice HTML, ma non mi pare di aver visto i codici Javascript con il file CSS.
    In basso alla pagina io vedo due Google Video inglobati nella pagina. Ho letto il codice HTML è praticamente hai nascosto il codice con i tag di commento “ < -- -->“. Per farsi capire hai inserito un link di YouTube, con un’immagine di un’albero di natale da quello che capisco dal codice, ma l’albero io non lo vedo.
    Ho notato che neanche LightBox funziona. Potresti dirmi più cose riguardate il problema perchè ancora non saprei darti una risposta.
    Grazie e scusa per il ritardo ma sono stato un pò impicciato. Grazie ancora per i complimenti!

  14. paolo ha detto:

    Ciao,
    si perdonami per la pagina, ma sono riuscito a risolvere il problema. In pratica ho inserito il videobox in un altra pagina e adesso funziona 😉 Molto probabilmente c’era un conflitto con qualche codice o un tag che non avevo chiuso 😈
    Comunque adesso funge benissimo, anche se avrei voluto fare tutto in una pagina. Forse lightbox e videobox insieme possono creare problemi… a qualcuno ha dato di questi problemi? Grazie per la gentilissima risposta 🙂

  15. SyGy88 ha detto:

    @paolo: Ciao, sono contento che sei riuscito a risolvere il problema!
    Beh onestamente io di questa incompatibilità tra i due script non ne sono a conoscenza, mi dispiace!
    Ciao!

  16. cris ha detto:

    ciao e complimenti per la traduzione cmq volevo chiedere se non esiste la possibilità,una volta aperta la finestra di passare a fullscreen ❓ ❓
    ciao!!

  17. SyGy88 ha detto:

    @cris: Ciao, grazie per i complimenti, ti ricordo che questo è un semplice blog non è il sito di supporto allo script. Comunque mi sono informato su google ed ho trovato il codice da inserire per far apparire il pulsante per il fullscreen:
    1) Devi aprire il file js/videobox.js e cercare la stringa: this.so.addParam(“wmode”, “transparent”); e precedentemente devi inserire questa stringa: this.so.addParam(“allowFullScreen”,”true”);.
    Adesso nel player di YouTube dovrebbe apparire il pulsante per la modalità fullscreen. Io non l’ho testato onestamente, facci sapere se cosi riesci ok?

    Ciao Ciao

  18. cris ha detto:

    grazie mille per aver risposto cosi velocemente!!!!!
    allora:
    – ho provato ad aggiungere il parametro che mi hai scritto ma senza ottenere risultati cosi mi son dato alla ricerca e ……
    -e ho risolto usando http://www.shadowbox-js.com/index.html simile a videobox ma con un po di funzioni in più. 😯 😯 😯 spero possa essere utile!!!!
    – ultima cosa le “virgolette” nei post vengono trasformate e se si prova a usarle come codice html non funzionano….non so se mi sono spiegato 🙄 🙄
    un saluto e grazie ancora

  19. SyGy88 ha detto:

    @cris: Ehi Ciao, Ho visto quello script, davvero eccezionale. Fa tantissime cose: immagini, video, presentazioni, pagine web. Davvero un bello script!

    Per il codice che ti avevo dato, beh te l’avevo detto non era testato, io l’avevo preso girando tra i forum sull’argomento.

    Vabè dai ormai hai trovato quest’altro script che fa al caso tuo no? Magari adesso provo lo script e ne scrivo un’articolo qui sul blog! Grazie per la dritta!

    Ciao!

  20. cris ha detto:

    grazie a te un saluto alla prossima!!!!!

  21. giorgio ha detto:

    io non ci sono ancora riuscito , ogni tanto provo

  22. Poldo ha detto:

    Ciao a tutti!
    Sono riuscito ad attivare il fullscreen!
    Prendendo spunto dall’indicazione di SyGy88 ho aggiunto
    this.so.addParam(“allowFullScreen”,”true”);
    anche nell’ultimo caso, quello riservato appunto al fullscreen per flash, ovvero al caso
    else if (sLinkHref.match(/\.flv/i))

    il codice intero della sezione diventa

    else if (sLinkHref.match(/\.flv/i)) {
    this.flash = true;
    this.so = new SWFObject(this.options.flvplayer+”?file=”+sLinkHref, “flvvideo”, this.options.contentsWidth, this.options.contentsHeight, “0”, “#000”);
    this.so.addParam(“allowFullScreen”,”true”);
    }
    else {
    this.flash = true;
    this.videoID = sLinkHref;
    this.so = new SWFObject(this.videoID, “flvvideo”, this.options.contentsWidth, this.options.contentsHeight, “0”);
    this.so.addParam(“allowFullScreen”,”true”);
    }

    non sono un programmatore e forse si potrebbe fare di meglio, ma così assicuro che funziona!
    Ciao ciao
    Poldo

  23. Giacomo ha detto:

    ragazzi scusate ho lo stesso problema che aveva vuto anche un altro ragazzo, al posto che aprirmi il video con il light box mi manda su una pagina di youtube, forse non ho capito io bene dove incollarlo nel html del mio blog.
    se lo provo a mettere subito sopra il tag (lasciando una riga di spazio) mi da questo errore:

    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The element type “body” must be terminated by the matching end-tag “”.

    help!!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.