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 .
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.
.. 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
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
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! 😉
tutto ok. Grazie tante per il suggerimento, funziona tutto. Nel rifare il sito ho dimenticato questo particolare inportante. Complimenti per il sito. Ciao
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!
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?
Ma questo messaggio dove ti viene scritto? all’interno del browser, quando vai sulla pagina in qui hai inserito lo script VideoBox?
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!
Non riesco a farlo funzionare: mi apre la pagina di youtube corrispondente al video. 😯
@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
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.
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
@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!
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 🙂
@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!
ciao e complimenti per la traduzione cmq volevo chiedere se non esiste la possibilità,una volta aperta la finestra di passare a fullscreen ❓ ❓
ciao!!
@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
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
@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!
grazie a te un saluto alla prossima!!!!!
io non ci sono ancora riuscito , ogni tanto provo
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
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!!