Posted on October 24, 2007 - by webmaster
Videobox: Lightbox for videos
Videobox is yet another modal window which overlays videos in the page. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. Just like slimbox it is written with mootools library. Videobox used swfobject to embed flash.
The usage is pretty simple (just as other modal window) we only need to include mootools javascript library, SwfObject javascript library,and ofcourse the videobox library itself, plus CSS file to control the visualization.
<script src="js/mootools.js" type="text/javascript"></script> <script src="js/swfobject.js" type="text/javascript"></script> <script src="js/videobox.js" type="text/javascript"></script> <link href="css/videobox.css" rel="stylesheet" type="text/css" media="screen" />
to activate it we just need to modify the link to the video file by adding the rel=”vidbox”, and add title=”my caption” to add caption to a videobox.
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">the video</a>
This entry was posted on Wednesday, October 24th, 2007 at 06:21 and is filed under Web 2.0. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Visit My Website
March 7, 2008
Permalink
Do you know if this will work with slimbox? I am currently using slimbox to display photo galleries and would like to use this new vidbox plugin for videos.
I just can seem to get both to play nice
Visit My Website
March 7, 2008
Permalink
Since both are based on mootools you just simply keep the slimbox, and add the videobox (and dependencies files).
if you want to use 1 for all try lightwindow or lightview
http://www.nickstakenburg.com/projects/lightview/
http://www.stickmanlabs.com/lightwindow/
Visit My Website
March 7, 2008
Permalink
Wow…lightwindow looks like it will do the trick!
Thank you so much!
Visit My Website
March 7, 2008
Permalink
thanks to kevin *lightwindow creator*
Visit My Website
March 8, 2008
Permalink
Unfortunately I spoke too soon.
Lightwindow works perfect in Firefox, but I am unable to load YouTube videos in IE7. You mentioned combining slimbox and videobox. I don’t know where to start doing this.
Can you help?
Visit My Website
March 9, 2008
Permalink
I am so sorry, quite busy at this moment, but i think thats not as difficult as imagine, start by finding videobox code where the parser start in writing embedded flash video using swfobject.
copy the block to slimbox.js, few codes that may you need is link target file type checker. the codes will have these logics
- find the slimbox rel attributes
- loop
- check if target (href attributes) is image or flash video
- write slimbox code (image) or flash embedded (videobox)
but do you test the sample that provided in lightview homepage? is it work in IE7? if it does, the prob is in your codes.. better try it first.
Good Luck
Visit My Website
March 11, 2008
Permalink
Thanks. I was able to get Lightwindow working properly. My mistake. I had changed the code a bit and “ahem” forgot to close the code properly.
Minor oversight on my part. But it is working wonderfully now.
Thank you for your help and direction
Visit My Website
March 23, 2008
Permalink
Can anyone tell me how I can modify the code to get the JW player to “autoplay” when playing my own .flv in a videobox?
Its easy to do with youtube because you can add the command to the ulr but how do you do it with your own hosted flv file using the JW player?
Visit My Website
March 28, 2008
Permalink
[...] JQuery Lightbox Plugin Facebox and Balupton edition [...]
Visit My Website
April 10, 2008
Permalink
Is there any way to use videobox along with lightbox? I want to use videobox for my youtube videos and lightbox 2 for my images.
Visit My Website
August 3, 2008
Permalink
I’m using Videobox WordPress plugin. Would you please tell me how to “autoplay” the (YouTube) videos?
Thanks a lot.
Visit My Website
August 8, 2008
Permalink
Hey there,
Like Harry, I am curious how to a) auto play youtube videos and also b) how to add or get videobox to play the youtube high quality tags &fmt=6 or &fmt=18
THANKS!
Visit My Website
September 1, 2008
Permalink
Hi Guys
I’m using videobox with my own hosted .flv files and have been searching for ages on how to autoplay the videos.
I finally stumbled across the solution trying random variables in various places.
As i am sending my own .flv files, i am using the line:
this.so = new SWFObject(this.options.flvplayer+”?file=”+sLinkHref, “flvvideo”, this.options.contentsWidth, this.options.contentsHeight, “0″, “#000″);
Under this i have typed:
this.so.addVariable(‘autostart’,'true’);
which fortunately has done the trick
Good luck and hope this helps
sugarflux
Visit My Website
September 15, 2008
Permalink
Hi Guys
Just a quick update to this..
I don’t know if my comment above was useful to anyone – if so please let me know!!
Since altering the above videobox.js i have also been on a mission to find out how to enable the Full Screen button. I’ve finally succeeded by adding the following line:
this.so.addParam(“allowFullScreen”,”true”);
Hope this is useful to someone!!
sugarflux
Visit My Website
October 31, 2008
Permalink
sugarflux,
can you show me how to put self-hosted flv file in the link tag with vidbox as ref= link? I am rather confused.
Visit My Website
November 14, 2008
Permalink
To autoplay with youtube you have to edit the videobox.js and add to the youtube url “&autoplay=1″ and after
this.so.addParam(“wmode”, “transparent”);
you have to add a line with:
this.so.addParam(“autoplay”,”1″);
it works for me (IE7, FF2)
Visit My Website
November 25, 2008
Permalink
after a bunch of messing around with code here, I got my fullscreen and autoplay working to my jw flv player displayed with videobox you need to find the following code in videobox.js:
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″);
}
and change it to:
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.addVariable(‘autostart’,'true’);
this.so.addParam(‘allowFullScreen’,'true’);
}
you can also add whatever usual variables and parameters you would under normal circumstances by adding them in a similar fashion.
Visit My Website
December 15, 2008
Permalink
I want to have a youtube video autoplay in the lightbox with an opt-in form below. hope it work for that
Visit My Website
December 24, 2008
Permalink
I have the same FullScreen problem with vidbox for youtube videos. I tried this.so.addParam(’”allowFullScreen”,true); – but it doesn’t work. I can’t see fullscreen button.
Visit My Website
January 7, 2009
Permalink
I have problem using videobox my own hosted .flv files can anyone explain that issue to me? please
Visit My Website
March 21, 2009
Permalink
Why does my flv file download when i input this code?
this.so.addVariable(’autostart’,’true’);
Visit My Website
March 23, 2009
Permalink
Anyone know how to get it to play HD and HQ without clickign the HQ or HD button after it coems up? I tried &fmt18 and &fmt22 but that doesnt do the trick
Visit My Website
April 29, 2009
Permalink
to get your youtube video to autoplay just change into videobox.js :
where:
this.so = new SWFObject(“http://www.youtube.com/v/”+this.videoID
add: +”&autoplay=1″
and you can also add other youtube params
Visit My Website
May 15, 2009
Permalink
I am using a dojo.thumbnailpicker and the videobox. but my problem lays when i click on a thumbnail the vidbox just clicks straight through to youtube. and doesn’t display the popup windo with video. is there any way to rescan the page after my links change from clicking on the thumbnail.
http://www.spot6management.com/talentspot/
initial page load brings up video fine.
but click on the thumbnails at the bottom and then the links go straight through to you tube.
Note: i am just using some test videos right now. but will be using real videos of the actual talents later either locally hosted or youtube style.
TIA.
Visit My Website
June 5, 2009
Permalink
Nice one there.
Everything works for me, except I have an ajax window map that’s hidding the overlay and flash… anyone know how to make the flash at least go over the ajax window map?
see here: http://loki.ouranos.ca/DAI/narr_step1_WM-e.html
Visit My Website
June 12, 2009
Permalink
hi.
I’m using the videobox wordpress plug-in, I can’t get my .flv to play, the vidbox opens but the file will not load, is there any trick to getting the .flv to work? (I am using a straight install of the plug-in, no added code).
link to the plug-in: http://wordpress.org/extend/plugins/videobox/
any help would be good Thanks
Visit My Website
June 15, 2009
Permalink
Hello,
I’m having the same fullscreen and autoplay problems. None of the fixes posted have worked, but I should mention I’m a total novice with javascript. The videos I’m using with videobox are also hosted on vimeo.com, not youtube, if that makes any difference.
Can someone please explain in greater detail how to get fullscreen and autoplay to work with vimeo.com videos in videobox?
Thanks in advance,
- Jeremy
Visit My Website
June 19, 2009
Permalink
i had same problem with the auto play, solved it with this -
this.so.addVariable(“autostart”,”true”);
i used ” ratehr than ‘
Visit My Website
July 29, 2009
Permalink
autoplay and fullscreen:
in videobox.js line 84 edit:
“http://www.youtube.com/v/”+this.videoID+”&fs=1&autoplay=1″
Visit My Website
August 12, 2009
Permalink
This above didnt work for me. I found another wa though:
In videobox.js line 85 move “this.so.addParam(“wmode”, “transparent”);” down a line then add:
this.so.addVariable(“autostart”, this.videoID+”&autoplay=1″);
Visit My Website
September 10, 2009
Permalink
Thank you, it’s great and easy !
I added this in videobox.js for wvx files :
else if (sLinkHref.match(/\.wvx/i)) {
this.flash = false;
this.other = ”
}
Visit My Website
October 20, 2009
Permalink
For some reason Videobox doesn’t display properly in IE for me. The top bit of the screen goes black but nothing else and the video is bigger than the container.
I can’t find ANY info on this online. If anyone has a solution, lemme know. Thanx.
Visit My Website
October 27, 2009
Permalink
Hello! I’m using VideoBox with YouTube videos and everything works fine, except the overlay. Does someone know why the background overlay does not cover the whole screen?? When you scroll down or up the site, the overlay looks only in the middle and the rest of the screen is without overlay.
Any help on this??
Thanks in advance
Ivan
Visit My Website
October 27, 2009
Permalink
wow!!! really a very precious information..thx guyz
Visit My Website
October 27, 2009
Permalink
Hello! Does anyone know how to fix
the overlay that does not cover the whole screen (In both IE and Firefox)
when you scroll down or up the page
as the VideoBox is opened??
Where I can set the overlay with and height?? Can I set it with percent instead of px?
Thanks in advance, hope you can help me!
Ivan
Visit My Website
November 22, 2009
Permalink
For some reason Videobox doesn’t display properly in IE for me. The top bit of the screen goes black but nothing else and the video is bigger than the container.
I can’t find ANY info on this online. If anyone has a solution, lemme know. Thanx.
Visit My Website
November 24, 2009
Permalink
drenz0r: your videobox overlay is not covering the screen in IE because your page is in IE “Quirks” mode.
The videobox.js makes calls to window.getHeight() and window.getScrollTop() which both return 0 when in quirks mode.
The easiest way to resolve your problem is to include a doctype on your page.
Visit My Website
February 11, 2010
Permalink
i am using vidbox to show swf files but I want to pass variables through a url query…i am a newb at js and I am not sure where to add the this.so.addVariable because I do not see an if”swf” case
any help is appreciated..
Visit My Website
February 25, 2010
Permalink
I’ve been trying to figure out how to get the background overlay to fill the entire height of the entire page. If I scroll up or down I see that only the current content view is covered. Any suggestions?
Visit My Website
February 25, 2010
Permalink
I found a quick fix for the fullscreen overlay issue. In line 118 of the jqvideobox.js file I changed:
overlay.css({‘top’: $(window).scrollTop()+’px’, ‘height’: $(window).height()+’px’});
to this:
overlay.css({‘top’: ‘0′, ‘height’: $(document).height()+’px’});
- Specified top to be ‘0′
- (document) will get the entire page height with scroll whereas (window) will get only the visible height.
Visit My Website
March 4, 2010
Permalink
Just be careful when copying the FullScreen code from Dan’s (excellent) post on 25th Nov. The apostrophes are the evil curly ones and not the straight type.
Use this instead:
this.so.addParam(‘allowFullScreen’,'true’);
Visit My Website
April 23, 2010
Permalink
Hello! I’m using vidbox with YouTube videos and everything works fine,But it does not work with jquery script.If i use videobox on simple page it works.On my page i m using jquery and i want to use videobox to,but its not working.
Any help on this??
Thanks in advance
Jharna
Visit My Website
May 18, 2010
Permalink
this is an alternative to videbox and using the JQuery library http://plugins.jquery.com/project/jqVideoBox
Visit My Website
May 21, 2010
Permalink
Are you intrested in doing a guts post on my blog?