Aaron Winborn

Here's a two-step formula for simple inline video, assuming you have jQuery Media installed on your site, doing both of these configuration steps from Administration > Site configuration > jQuery Media (at /admin/settings/jquery_media):

1. Open the Node types field set and check the node type for which you wish inline video.
2. Open the Classes field set, and enter .node .content a in the Media class text field. (You can separate classes by comma if you want to keep existing class invocations.)

Then just add a link to a video inline to your content. Doesn't matter if it was uploaded with the node or through FTP. (The second step assumes you're using the Garland theme, or another theme that uses that CSS class designation. You might need to check the node in FireBug if you're not sure.)

Notes: This method is easy, though admittedly a bit heavy-handed. The down-side is it will be invoked regardless of whether the node actually contains a video link (fortunately it's a lightweight jQuery plugin). If you want more fine-tuned control, you can skip the first step, use a PHP filter, and just invoke it manually from in your node, using jq_add('jquery_media') (assuming you have the jQ module enabled; jquery_media_add(); otherwise). (I don't actually recommend that, because of all the security issues involved. Just stick with the first method.)

The cool thing is this will work with pretty much any media player, including the upcoming Media Player for Drupal!

If you haven't already, make sure to check out Sean Effel's latest Filefield + jQuery Media screencast! As was his earlier Feed API + Emfield video tutorial, this is a joy to watch: he does things in thirteen minutes that took developers hours or more to do even a few short months ago, and that's with a running commentary! By the end of the video, you will have learned a simple way to upload a video (using the light-weight File Field module) and have it properly displayed without any messy configurations or external libraries. Plus, as the recipe uses the jQuery Media plug-in wrapper module, the display will be cross-browser compliant and accessible.

Next on my plate for jQuery Media is to have it be easily added to nodes on an individual basis, so that a media clip could be linked inline and automatically turned into an embedded display. Additionally, I would like to make it an option for Views as well, perhaps as an additional setting. (Although even without that, my upcoming book Drupal Multimedia, to be published in September, goes into some detail about how this can already be done, to create powerful video and audio playlists.)

I made an official release for the jQuery Media module. This is a wrapper for the jQuery Media plugin. I have made this a full featured module, an aid for developers and themers. We are using it for the audio clips of Air America Radio.

From its help page:

The jQuery Media plugin will turn links to media into their embedded media equivalents, or into a modal overlay embedding the media when the link is clicked. Installing and configuring the module is only the first step: you must also manually theme the output of links in order to enjoy the benefits of this plugin.

Theming is outside of the scope of this help page. You might look at Drupal's Theme Developer's Guide for more information. However, once you are ready to theme your elements, you only need to add a class and invoke this plugin. For instance, if you have a File Field with a video, simply use something like the following:

You may override the global defaults of this plugin when configuring. Additionally, you may override a global default on a case-by-case basis by including the override in an options array when invoking the plugin. For instance, you might override the background color of players on a specific page with

This will override the defaults of the plugin for every media link on that page, which may in turn override those individually (more on that later).

The full array of global overrides are as follows:

• 'flvplayer' => The path to the Flash Video Player to be used, such as the JW FLV Player or Wimpy Rave.
• 'mp3player' => The path to the MP3 Audio Player to be used, such as the JW FLV Player or Wimpy MP3 Player.
• 'boxtitle' => When using the MediaBox option (the modal overlay), this will be the title displayed on that box after clicking the link.
• 'loadingimage' => When using the MediaBox option, the path to this image will be displayed while loading the media after clicking the link.
• 'media width' => The width the media will be displayed as.
• 'media height' => The height the media will be displayed as.
• 'mediabox width' => The width the MediaBox will be displayed as.
• 'mediabox height' => The height the MediaBox will be displayed as.
• 'autoplay' => If TRUE, then play the media as soon as loading it.
• 'bgcolor' => This will be the background color for the media player, in hexidecimal code (#RRGGBB).
• 'invoke media' => If TRUE, then cause all links with the 'media class' to automatically be turned into embedded media when invoking the plugin.
• 'invoke mediabox' => If TRUE, then cause all links with the 'mediabox class' to automatically display a modal overlay box when clicked.
• 'media class' => The class that will be turned into embedded media on invocation. It uses jQuery CSS notation, so should be something like 'a.media' for links.
• 'mediabox class' => The class that will display a modal overlay box when clicked on invocation. It uses jQuery CSS notation, so should be something like 'a.mediabox' for links.

Finally, you may override a global setting on an individual basis. The customizations here are extensive, and rather than repeating that here, you are directed to the jQuery Media homepage for more information. As an example, you might set the size of a specific file with the following, while leaving any other jquery media links on the page at their default. (Note that we change the class away from the default 'media' in this example. It also assumes we've already invoked it as above.):

Note that by default, the module will add its default overrides inline. However, you may set it to output them to a dynamic javascript file, and may additionally wish to set the defaults to a static js file, once development is complete. You can alter those settings when configuring the module.

I've just created the jQuery Media and jMedia wrapper modules for those two jQuery plugins. I am excited about both of them, which are similar. I'm already using jQuery Media for the audio player for Air America Radio (to be launched next week), and found out about jMedia today while researching other uses for the plugin.

Basically, these plugins will replace links or other text with Multimedia, automatically compatible with the browser. They both support audio and video, and come packed with cool features that I haven't even finished exploring yet.

I'll show you how it works next week after Air America's launch. But I'll let you know, it's really, really cool. Makes developing multimedia intensive sites super easy. And I'll definitely have to put it in Drupal Multimedia, my book that should be published this summer.

I plan to support one or both of them in Embedded Media Field as well, as it should make theming that easier than it currently is. They both already support jQ out of the box, for easier administration.

And that's just the beginning...