Mediabox
iaian7 » article, John Einselen, 261 days ago
Using the MooTools javascript library, Mediabox lets you open flash, video, and html content in a floating “lightbox” style window.
Updates to Mediabox have been long in coming, as I’m still working on a restructuring of Iaian7.com, along with hard drive fiascos, loads of work, and a book I’m starting to illustrate. Thank you for your patience! Support for custom corners and overlay shadows (based on my CSS setup posted a few weeks ago) is still being developed as a branched version, called Mediabox Advanced. It’s ready to go, but I kinda want to release after the new Iaian7.com design and layout is finished!
Updated to version 0.7.0 (download below) Mediabox now supports Flickr Video, Vimeo, inline HTML content, and the longstanding fullscreen bug is fixed!
Online Video
Mediabox will read Youtube, Google Video, Metacafe, Flickr Video, and Vimeo links by automatically translating them into embed code and inserting the video into the lightbox style effect.
<a href="http://www.youtube.com/watch?v=l9MdgSUpG5U" rel="mediabox[480 380]" title="www.youtube.com">play YouTube »</a>
<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="mediabox[640 290]" title="video.google.com">play GoogleVideo »</a>
<a href="http://www.metacafe.com/watch/377633/transformers_2007/" rel="mediabox[400 350]" title="www.metacafe.com:caption test">play MetaCafe »</a>
<a href="http://www.flickr.com/photos/7909927@N04/2404125541/"rel="mediabox[400 300]" title="flickr.com:and this is the caption">play Flickr video »</a>
<a href="http://vimeo.com/615344" rel="mediabox[400 302]" title="vimeo.com">play Vimeo video »</a>
<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="mediabox[640 486]" title="www.dailymotion.com">play DailyMotion video »</a>
DailyMotion is 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.
I have tried to implement Veoh and MySpaceTV content as well, but with no luck. It seems the embedding requirements are fickle, and refuse to load in the Mediabox layer no matter what I try.
Flash Animation
A link to a specific .swf file that isn’t from one of the above video sharing sites is 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
If the media being linked to is a .flv (flash video) file, it will be embedded using Jeroen Wiering’s Mediaplayer. The flash player controls are hidden till the user mouses over the content. This not only gives a cleaner, more dramatic presentation for the video being embedded, but fixes display errors in Firefox Mac (see Known Issues, below). Update: in the latest versions of the JW player, the controller is still displayed on top of the video, but is not hidden until after the user mouses over and back off at least once.
<a href="http://iaian7.com/media/2007/06/2007vfx.flv" rel="mediabox[640 360]" title="flash video">play flash video »</a>
Quicktime
Quicktime content now plays correctly in most browsers, including Safari 1.5/2.0 (which required extra coding to stop playback when closing the layer). 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.
<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]">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]">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.
Implementation
In addition to the above methods, using the rel=“mediabox[]” attribute to create links to overlays, there are ways to use Mediabox with javascript, flash, and frames.
Javascript
A Mediabox overlay can also be opened using 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 through javascript as well. It’s important to note that links, even though formatted correctly, may not work if pulled from an XML file. I’m not sure why, and without any flash experience myself, it’s a little difficult to figure out on my own. If anyone has experience with this sort of thing, contact me and let me know.
javascript:Mediabox.open('url','title','mediabox[width height]');
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 and Install
Scripts
mediabox70.js version 0.7.0 Beta (about 14kb)
mediabox.css (this CSS also contains the necessary styling for Slimbox, see below)
mediaboxImages.zip (includes matching images for Slimbox)
Dependancies
Mootools javascript library, Mediabox requires the Base, Class, Native, Element, Window, and Effects modules (in total, less than 30kb).
SWFobject for implementing flash content (less than 8kb)
JW Mediaplayer or JW FLVplayer. (or get it from the Mediaplayer v3.99 archive)
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. 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 (with 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>
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! If you have any trouble, keep reading…
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)
Plugins and Extensions
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.
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.
— Windows Media does not work.
Version History
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 (download archive)
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 and Support
For support requests, please include a link to a test page. If a site is still under wraps or NDA, send me a private message, along with any NDA documents, if required.
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!
As part of the long-in-coming site redesign, support questions will be moving to a new system that will make it easier for you to track replies. While commenting here will stay active for awhile, I’ve already set up the Disqus community page for Mediabox. Feel free to start using the Disqus system, and while it may change again before the year is out, it should be a good stopgap till I can develop a more integrated solution. Thank you for your patience, and I apologize to everyone who’s questions have been lost in the email system or left unanswered here on the site.
