Mediaboxiaian7 » 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.
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>
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>
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>
<a href="http://iaian7.com/media/2007/06/2007preview.mov" rel="mediabox[480 270]" title="play">play quicktime movie »</a>
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>
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_”.
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.
Keep in mind that using
<body onload="Mediabox.open('url', 'title', 'mediabox[width height]')" >
You can also close the Mediabox overlay from within an opened iFrame by using
(Thanks to NiteStyle for enlightening me!)
Flash files can access Mediabox overlays via ActionScript (code courtesy of Peter Cha).
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.
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)
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)
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
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).
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).
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.
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)
— 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.
— 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.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
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
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.
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.
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
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
cool script! however any chance this will be implemented for mootools 1.2 any time soon?
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!
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
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 )
Just wanted to say “great job”! It’s exactly what I need.
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?
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.
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!