Mediabox
iaian7 » code » webcode John Einselen, 27.09.08 (updated 6.12.19)This script has been replaced by mediaboxAdvanced. Please update your links! Though officially deprecated and no longer supported or actively developed, the older version of Mediabox Standard will continue to be available here for users of Mootools 1.11.
Examples
Mediabox will read Flickr, Google, MetaCafe, MySpace, Revver, YouTube, Veoh, Viddler, and Vimeo links by automatically translating them into embed code and inserting the video into the lightbox style effect.
Flash animation, flash video, quicktime, windows media, inline content, and external html content is all automatically recognised as well. Every link listed below is shown with the code used to make it.
Social video sites
<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video"rel="mediabox[400 300]" title="flickr.com">play Flickr video »</a>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="mediabox[640 290]" title="video.google.com">play Google video »</a>
<a href="http://www.metacafe.com/watch/377633/transformers_2007/" rel="mediabox[400 350]" title="www.metacafe.com">play MetaCafe »</a>
<a href="http://myspacetv.com/index.cfm?fuseaction=vids.individual&videoid=23472681" rel="mediabox[430 346]" title="myspacetv.com">play MySpace »</a>
<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="mediabox[480 392]" title="www.revver.com">play Revver »</a>
<a href="http://seesmic.com/app?#/video/GtXGiBXzWb/watch" rel="mediabox[425 353]" title="www.seesmic.com">play Seesmic »</a>
<a href="http://www.youtube.com/watch?v=l9MdgSUpG5U" rel="mediabox[480 380]" title="www.youtube.com">play YouTube »</a>
<a href="http://www.veoh.com/videos/v753286qccrGhsT" rel="mediabox[540 438]" title="www.veoh.com">play Veoh »</a>
<a href="http://www.viddler.com/explore/clintus/videos/143/" rel="mediabox[437 370]" title="www.viddler.com">play Viddler »</a>
<a href="http://vimeo.com/615344" rel="mediabox[400 302]" title="vimeo.com">play Vimeo »</a>
<a href="http://12seconds.tv/channel/GruvenReuven/28325" rel="mediabox[431 359]" title="www.12seconds.tv">play 12seconds.tv »</a>
Note: the 12seconds.tv video player will not scale, so you’ll want to use [431 359] every time. Other media players may not scale very well either, so pay attention to the defaults listed on the site here, on the sites themselves, or your own trial and error.
Mediabox can also integrate DailyMotion videos, but it’s a little less foolproof since page links and embedded links don’t use the same ID numbers. To insert a DailyMotion video, you have to use the link given in the embed code.
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="mediabox[640 486]" title="www.dailymotion.com">play DailyMotion »</a>
Flash Animation
If the link is to a specific .swf file and isn’t from one of the above video sharing sites, it’s embedded directly (the file below is from HomestarRunner.com).
<a href="http://www.homestarrunner.com/tgs10.swf" rel="mediabox[550 410]" title="flash animation">play flash animation »</a>
Flash Video
FLV format media will be embedded using Jeroen Wiering’s player. The flash player controls are displayed as an overlay to the video (which can solve some layering issues in Firefox Mac), and show up on mouse over.
<a href="http://iaian7.com/media/2007/06/2007vfx.flv" rel="mediabox[640 360]" title="flash video">play flash video »</a>
Quicktime
Quicktime content plays correctly in most browsers, but plugin detection is not included with this script. The height of the controller (16 pixels) is automatically added to the media height if the controller option is set to true in the javascript (as of version 0.6.7).
<a href="http://iaian7.com/media/2007/06/2007preview.mov" rel="mediabox[480 270]" title="play">play quicktime movie »</a>
Windows Media
WMV files are only partially supported right now, as plugin usage seems to be… weird. Does not work well in Internet Explorer 7, and is all but completely broken in Opera 9 and Safari 3 for Windows. Also, it sometimes breaks Safari in OS X.
<a href="http://iaian7.com/media/Puppet.wmv" rel="mediabox[480 270]" title="play">play wmv file»</a>
Inline Content
By referencing inline content via element ID, Mediabox will take overlay content from anchor links. This can be especially useful when working with a content management system or similarly generated content, since Mediabox overlays can access page content directly, not just outside links! For example, wrapping a comment submission form with a DIV that’s hidden, then linking to it with Mediabox will let you create comment submission overlays. The possibilities are endless…
<a href="#mb_inline" rel="mediabox[360 180]" title="inline content">open inline content »</a>
<div id="mb_inline" style="display: none;"><span style="color: #999999; text-align: center;">inline page content wrapped by a DIV set to display:none, and shown in a Mediabox overlay.</span></div>
Please note – because other valid HTML links may contain anchor links, Mediabox will only work with elements whose IDs start with “mb_”.
Web Content
If the link passed to the script doesn’t fit any of the above media types, it will be opened in an iFrame content area. While iFrame usage isn’t as flashy as AJAX, it allows you to embed forms, pages, sites, and etc. without any scripting or styling conflicts. It’s simple, it works.
open Yahoo Movies » (see “known issues” for Opera compatibility)
<a href="http://movies.yahoo.com" rel="mediabox[800 600]" title="Movies.Yahoo.com">open Yahoo Movies »</a>
open Google.com» (see “known issues” below for a Safari quirk)
<a href="http://www.google.com" rel="mediabox[640 360]" title="Google.com">open Google.com »</a>
In all, Mediabox is designed to compliment the image based functionality of Slimbox (or other lightbox style scripts), offering the same effect for flash, video, and html content.
Alternate link types
In addition to the anchor tag examples above, Mediabox can be instantiated via other methods.
Javascript
<a href="javascript:Mediabox.open('http://iaian7.com/media/2007/06/2007vfx.flv', 'javascript example', 'mediabox[640 360]')">Click Here</a>
Keep in mind that using <a href="#" onclick="..."> will cause the page to jump to the top, while leaving the Mediabox window behind at the original click point, due to the nature of anchor links. It’s inadvisable to use javascript calls for a simple link anyway, since that functionality is already built into Mediabox. However, the direct javascript call can be very useful in other situations; to load a Mediabox window on page load, you can use the onload=”…” function in your <body> tag.
<body onload="Mediabox.open('url', 'title', 'mediabox[width height]')" >
You can also close the Mediabox overlay from within an opened iFrame by using parent.Mediabox.close();
(Thanks to NiteStyle for enlightening me!)
Flash
Flash files can access Mediabox overlays via ActionScript (code courtesy of Peter Cha).
AS 3.0
var mediaboxCommand:String = "javascript:Mediabox.open('url','title','mediabox[width height]');void(0);"; var url:URLRequest = new URLRequest(mediaboxCommand); navigateToURL(url, "_self");
AS 2.0
on (release) { getURL('javascript:Mediabox.open(\'url\', \'title\', \'mediabox[600 600]\');void(0)'); }
Frames
When a site is designed in frames, links will automatically open their Mediabox window inside the frame wherein the link was clicked. There is no way I know of to make this work with the auto detected links unless I were to rewrite Mediabox to recognize target=“parent”, and even then it’s iffy.
However, you can send a javascript call to the parent frame. So long as the parent frame has the proper javascripts linked and running (Mootools, Mediabox, etc.), it should work fine.
javascript:parent.Mediabox.open('url', 'title', 'mediabox[width height]');
Download
Script -
1 version 0.7.3 Beta (about 23kb)
1 (this CSS also contains the necessary styling for Slimbox, see below)
1 (includes matching images for Slimbox)
Dependancies -
Mootools javascript library (in total, less than 30kb)
Mediabox requires the Base, Class, Native, Element, Window, and Effects modules
SWFobject 1.5 for implementing flash content (less than 8kb)
JW Mediaplayer or JW FLVplayer (or get it from the Mediaplayer 1)
Optional -
Mediabox is designed to work well alongside Slimbox, a lightbox script for images and image groups. Not only are the link formats very similar, but the CSS formating is exactly the same, allowing you to use just one CSS file to style both scripts.
One note about setting up the CSS (and this goes for Slimbox and Mediabox both); if other elements on the page use z-index settings, they will appear on top of the overlay and content box. This can be fixed by adding z-index: 50; to #lbOverlay, and z-index: 51; to #lbCenter, #lbBottomeContainer in the CSS file (you can use any values, so long as they are greater than the other elements on the page).
Installation
mediabox.js, mediabox.css, mootools.js, and swfobject.js should all be loaded in the page header. If you’re also installing Slimbox, you only need one copy of the CSS code, either slimbox.css (with the default styling of white and gray) or mediabox.css (which is a black theme).
<head> ... <link rel="stylesheet" href="/css/mediabox.css" type="text/css" media="screen" /> ... <script src="/js/mootools.v1.11.js" type="text/javascript"></script> <script src="/js/swfobject.js" type="text/javascript"></script> <script src="/js/mediabox.js" type="text/javascript"></script> ... </head>
If you want to test this on a local machine, you can download a minimal 1 and unzip it to your hard drive. It contains all the basic files needed, except for the JW mediaplayer.
Some users have reported problems with the CSS if the page does not include a DOCTYPE. Check out w3.org for more info on the various options, personally I use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because that’s the default Textpattern CMS preference.
Open up mediabox.js in a text or code editor to set the preferences; most can be left at the defaults, but you do have to set the path to the JW mediaplayer. Each option has a short description, and should be fairly easy to set up.
The CSS file must also be edited with the correct links to the images.
That should be it! Try some links with the following format:
<a href="link" rel="mediabox[width height]" title="caption text" >link text</a>
Blogs and Content Management Systems
Adobe Lightroom: web module by Matthew Campagna.
RapidWeaver tutorial by Kevin Burns
Textpattern: plugin by John Einselen
Typo3: integration by Georg Ringer [english]
Let me know of other plugins and integrations, and I’ll list them here.
Troubleshooting
If you encounter errors, please double check the following:
— did you upload all of the JS and CSS files to your server?
— are the links in your header relative or absolute? (Either is correct, but relative won’t always work in some page / url setups)
— is the Mediabox.js script correctly updated with the path to the SWF player?
— are you running any other scripts on your website? (Prototype and Scriptaculous directly conflict with Mootools, as do any other JS libraries)
Known Issues
— Mootools 1.2 is not supported, Mediabox currently runs only with 1.11. The next major release (0.7.4 may be a small update to include several more formats) will hopefully add complete Mootools 1.2 functionality.
— SWFobject 2.0 is not supported, you must use version 1.5. In connection with Mootools 1.2 support, the next major Mediabox release will hopefully eschew SWFobject for a completely native solution.
Known Issues (OS X)
— Firefox 2.0 is incapable of rendering Objects (either Flash or QT) correctly when displayed above any sort of background (simple colors, images, or even worse, other media). Usually, the playhead of the video will move, causing it to appear again. Sometimes other elements aren’t so lucky, but for the most part things remain usable. YouTube, unlike most flash video sites, will render correctly, as will the JW players when the controller is set to mouse over (which is the default setup in Mediabox). DailyMotion content may not show up at all until the user clicks blindly on the play button. Camino 1.5 and Flock 2.0 have similar problems.
Flash media embedded on a page in Firefox, and especially items directly underneath the lightbox window, may or may not become completely or partially invisible or visible, and/or gruesomely mangled. It’s probably best if you use mediabox for all media on a page, or none at all, instead of trying to embed both lightbox style effects and inline objects.
It has been pointed out that flash media is hidden when Mediabox opens an overlay. This is necessary because of rendering issues in Firefox and some other browsers. The flash content is of course un-hidden when the overlay is closed, however, if the flash content isn’t playing, no update to the imagery is detected in Firefox, and the content will remain invisible (though technically shown). I have found no way to fix this, as Firefox simply refuses to display Flash content correctly in a layered environment.
— Loading sites with flash based advertising or popups (such as movies.yahoo.com) in Opera 9 will sometimes cause elements to reach beyond the bounds of the iFrame containing them. It is, I believe, simply an issue with Opera’s implementation of the iFrame standard and therefore unfixable on my end. So long as you don’t embed sites such as movies.yahoo.com, Opera is quite happy.
— Loading some sites inside an iFrame with Safari 1.5 and 2.0, or Opera 8 will cause the browser window to scroll to the top. It’s only a few select sites that cause it (google.com), loaded as iFrame content, and it’s only in Safari 1.5, 2.0 and Opera 8 (that I know of), which given their outdated nature may not be that much of a concern.
— Camino 1.5 only partially supports WMV files played through the QuickTime plugin. While the video will load, page elements can become jumbled and various white spaces will appear until the page is forced to refresh.
Known Issues (Windows Vista)
— Quicktime media suffers from the click-to-activate “feature” of Internet Explorer 7 and Opera 9. Unfortunately, the text doesn’t actually show up, so viewers are stuck with a blank screen that, if they know to click on it, will thankfully still play the quicktime just fine. I originally tried to use a script setup for Quicktime much like the Flash setup used, but was entirely unsuccessful. Till I can revisit the Apple standards and rebuild the QT loading architecture, this is an unfortunate bug that may not go away.
Version History
v0.7.3
— Seesmic and 12seconds.tv support added
v0.7.2
— MySpace, Revver, Veoh, and Viddler support added
— prevented crash with WMV in Safari
v0.7.0
— Flicker Video support added
— Vimeo support added
— inline HTML content support added
— fullscreen options fixed
v0.6.8
— display position is now a javascript option
v0.6.7
— QT media now automatically adds the controller height
v0.6.6
— captions fixed
— fullscreen JW mediaplayer option added (still not working)
v0.6.5
— fixed IE7 errors when unloading content (still in beta)
v0.6.4
— reworked script layout and media loading process
— fixed Safari QT errors
— fixed Opera QT errors
v0.4.2
— fixed double loading error (1)
v0.4.1
— fixed script init error
v0.4.0
— public beta release
v0.1.0 – v0.3.5
— private beta release
Credits
Mediabox is based on:
Slimbox version 1.4 by Christophe Beyls
Slimbox Extended version 1.3.1 by Yukio Arita
Videobox version 1.0 by Faruk Can Bilir
DM_Moviebox version 1.1 by dutchmonkey
Comments
Please read the documentation. It’s updated as errors are found, tricks discovered, and new features added. If you can’t get Mediabox to work, the solution is probably already posted above. Double check the list of common errors in the Troubleshooting section!
Comments can be left on this page, but support requests and questions must be posted to the Mediabox Google Group. For any problems or bugs, please include a link to the problematic page.
Hi,
Amazing script! Thanks so much. I have it working great over at www.roadtogameday.com, but I’m trying to get it to load from a flash project and I can’t get it to work. Could someone post a test FLA project that works? When I try to use the AS3 code you posted above the link simply opens a blank firefox window…it won’t open up the requested file or media box.
HI there
Great work and good to see the next version underway. I have a question about wrapping H264 content in the flashplayer or even changing out the current player for FlowPlayer for example. So instead of QuickTime content being played in the traditional QuickTime-player to have it wrapped in a Flash Player. Do-able or not a good idea 
Thanks
me again
As a cheating way you can rename the mp4 as flv, or alternatively add a new option in the mediabox js for MP4. Asa quick test I did the latter and got my mp4 contained in the flash player yay… although the controller bar comes up dark (booo) even though the options are set to as near as white as possible
Thnx
Kb
cool script! however any chance this will be implemented for mootools 1.2 any time soon?
To answer a couple highlights from the past few months…
Ian – Mediabox is initialised on DOMready, which should avoid errors associated with waiting on pageload. What kind of machine are you testing on? What browser?
Jorre – To position the video play bar of Jeroen’s player below the media instead of as an overlay, you’ll have to play around with some of the Mediabox code. Mediabox Advanced is built for the latest Jeroen player, and includes an easier option for changing this behaviour.
ideviate – There is currently no method of automatically implementing extraneous media (such as advertisements) along with flash or other content. The best way to do it is either modify your own flash files to include ads, or using the html content loader to do it (loading an external page that includes the desired media and the ads). Content loaded via Revver already has ads included.
Loko – The scrollability of inline content is controlled through the CSS. Try changing the lbImage or lbCenter settings to allow for scrollbars. If that fails, you might also try styling the content you’re inserting with a scrollable DIV.
Dazza – Moving around the elements is unfortunately harder than just changing a few parameters in the CSS. Thankfully, it shouldn’t be much harder than changing a few lines in the javascript, and then editing the CSS. 
Look for where the close button element is created (near the begining of the script, but after the options), and move it to just before the creation of @this.canvas@. Test it out, then edit the CSS to get the styling right. Not sure if it’ll like it, and you may have to add a @clear:both;@ element to prevent the media element from blocking it out at the top. I’m not sure.
Kevin – MP4 support should be as simple as adding the file format to the IF statement for FLV content. Unfortunately, I don’t think flash supports .mov formats… just .mp4. It’d be lovely to have a better cross-platform solution than the QT plugin, or, for that matter, the WMV player too!
Chris – Yes.
I’m sorry to have missed so many messages, and I apologise to all the ones I’ve skipped over. If you’re still having trouble, please post in the Google group. I can’t keep up with support questions all the time, but maybe the community at large can help out from time to time.
To Rochard Ogima, Loko, Christian, and all of you, thanks! I love hearing from people who find my scripts useful.
Hi and great work!
Quick question and apologies if you’ve already answered- I’m running mediabox.js with slimbox.css. I have a page with a flv video which works fine with mediabox. I also have a series of images. Each work fine with meadiabox. Is there a way to group and provide previous/next functionality for the images only? I don’t want the previous next functionality with the video for same reasons you mention: interacting with buttons over the video media can be sketchy. Thanks in advance!
Timh – It’s odd, but Mediabox was never intended to be used with images… previous and next buttons were removed to prevent them from interfering with other content (being unable to click on a movie to play it, or stop it from playing, is a bad thing!). It was always supposed to be a companion script to Slimbox.
However, mediaboxAdvanced fixes this! Image support is finally reintroduced, along with gallery sets and a “few” other updates. Get it at iaian7.com/webcode/mediaboxAdvanced.
Mediabox is great plugin! I use it
*How to hide private content or links
of flv or avi?*
I want to protect all URLs of video content flv or avi
http://floomby.ru/content/3bf9da3d-c8a1-46b3-b1cb-e80c0f50a265.html
can it protect or hide? bacause content may be private…
How to play DiVx(.avi)links like http://tinyurl.com/68n37k
(Usualy Divx player alow these formats of url without (.avi) extention,and normaly plays it )
Thanks
Just wanted to say “great job”! It’s exactly what I need.
Hi,
I have a problem width the javascript code using Internet Explorer “overlay is Null, line:127” but it works on Firefox.
What’s the matter ?
Hi, its a relly great pluging but am trying tu use de actionscript 2 code and i cant get it work,you have any solution?
wow!!, la verdad que todo lo que tienen es asombroso y es fantástico que lo compartan con otra gente, estoy empezando a usar ajax y la verdad me da resultados asombrosos, la única desventaja es que javascript se puede desactivar en los navegadores, pero se puede detectar el navegador con php y mostrar un mensaje al usuario no?, saludos!! y gracias por el código, lo voy a investigar..
I was searching for a lightbox utility that would support quicktime and landed on this site.
Pretty much right out of the box. Did have to figure out which files I needed, but wasn’t too difficult. I ended up zipping up the necessary files to get started if you don’t want to manually download everything listed: mediabox download
I also made a few changes. Since it detects which type of file is by extension, I had to modify a few regex comparisons to support more file types.
Also for the quicktime, I added backcolor=“0×00000000” since if the dimensions aren’t correct, it defaults to blinding white.
You can check out my website to see it implemented: HD-Trailers.net
With embedding from Vimeo is there a way to remove the title, and avatar from the embed video like you can if you embed it using the code provided by Vimeo?
Other than that, fantastic coding.
M.
mediaboxAdvanced
Hi, I think is is really great. Thanks! One thing though, is on playing youtube, how do I get the close button and title to the top of the window…? above the youtube clip?
I want that title and CLOSE X at the top please!
Thanks!