Example embedding code from YouTube:

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/KLGClOOL62Q&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/KLGClOOL62Q&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed></object>

There is always the option of adding a custom code module below your actual Joomla article using the Module Manager, but this is a complete hack that normal content authors will find too cumbersome to remember, much less execute. What’s needed is a simple method that doesn’t require much effort on the part of the user. Fortunately, there are a number of plugins to help out! We’ll be covering two of them: EasierTube by Lee Everson here, and AllVideos from JoomlaWorks in a follow-up article. Both are Open Source and non-commercial.

EasierTube

Let’s start off with the easiest, most simple to use video embedding method there is… EasierTube, available as a stable 4.4 version for legacy Joomla 1.0, or as a beta 5.5 version for Joomla 1.5 version installations. Just paste the URL of your video into an article and EasierTube converts it to the needed code so that viewers see your video instead of the link. To do this, EasierTube scans articles and converts any YouTube (or Google, UStream, Revver, mpora, mybreak and Myspace) video links it finds into the correct OBJECT/EMBED tags to display the video, but it doesn’t alter the Article Manager version of the article … just what the end user sees in their browser.

Example YouTube URL:

http://www.youtube.com/watch?v=KLGClOOL62Q

Settings: It defaults to a small width, so you’ll want to make sure to edit the default video sizes in the Plugins Manager (just find it in the list, click its name, and edit its settings). EasierTube provides two dimension settings: home page content and interior content. This accommodates folks who may have a narrow blog format on their home page, but a wider format when the complete article is viewed. There are a ton of settings, allowing you to loop, autoplay, provide full-screen viewing, and specify border settings. You can disable related videos, annotations, video info, stats, and even the title. You can turn off support for each of the individual formats it supports (YouTube, Google, etc.).

Possible Problems: This approach is drop-dead simple. All your content authors need is the URL to the video, not all the OBJECT/EMBED code. EasierTube takes any video URL it understands and takes care of the rest. Of course the devil’s in the details. It converts ANY video URL it understands, no matter where it finds it in the article (or the HTML code in the article). If you simply want to post a text or button link to your video, forget about it. EasierTube will commandeer the link, turn it into a video display, and cut off the rest of the paragraph. Not at all desirable. So, as long as your content authors don’t provide text links to videos, you’ll be fine. But be warned. =)

Installation: Like other Joomla extensions, just download the ZIP of the plugin and use your site’s Extension Installer. You’ll get a brief confirmation message, and once it’s installed you’ll need to remember to actually enable the plugin inside your site’s Plugin Manager.

Check back soon for our follow-up article on the AllVideos plugin from JoomlaWorks!

But first, a little background… Web designers are always looking for new and better methods to present content in more efficient and user-friendly ways, and two of the best practices borrowed from desktop applications are “tabs” and “slides.” Tabs allow for multiple content items to be displayed in the same document window, while slides allow portions of the page to expand/collapse on demand. Both provide the designer with a method of allowing the user to quickly get to additional (i.e. supplemental) information without requiring a page load. This idea is pretty common in sites where there is an initial product description above a series of tabs for technical data, comparison charts, related items, etc.; clicking one of the tabs changes the content below the tab set while keeping the product description above. With the advent of freely available JavaScript frameworks like jQuery and MooTools, the bad old days of programatically cumbersome and SEO-belligerent tabs and slides are gone, replaced with elegant DOM- and CSS-based solutions.

A stock Joomla 1.5 install has no built-in facility to display page content in tabs or slides, and so developers must either cobble something together from scratch or use a third party plugin. And that’s what takes us to our first plugin of the series… Joomla Tabs and Slides (in content items). Like most plugins, Joomla Tabs and Slides provides a non-invasive method of adding its functionality without the developer having to add any code to his or her templates or touch the core Joomla code at all. As with most well-written plugins, simply install the Joomla Tabs and Slides ZIP archive in the Joomla Control Panel (Extensions > Install/Uninstall) and then make sure it’s activated in the Plugin Manager (Extensions > Plugin Manager). At this point, you need only add some simple inline tags to your articles, so let’s talk about those.

When Joomla renders your site’s content, it passes through the filters of a number of plugins, each getting the opportunity to do something to the content. Joomla Tabs and Slides simply takes its turn at your content, looks for its special “tab” tags (see example above), and outputs the CSS and JavaScript necessary to turn them into tabs. To begin a tab set, simply add a new paragraph in the Joomla article editor and type “{tab=xxxx}” replacing xxxx with the name of your tab (don’t type the quotes; spaces and special characters are allowed). As you can see, the tab tags begin and end with braces. Then type the content of your tab. It can be just about any properly formatted content (tables, paragraphs, images, etc.). When you’re ready to close your tab and begin the next one (assuming there is more than one), simply create a new paragraph and type “{tab=xxxx}” again, replacing xxxx with the name of your next tab (no quotes). Continue this until you have finished the content of your final tab. Then, create a new paragraph and type ”{/tabs}” (no quotes). This tells the plugin to close up the tab set. In the example above you can see how this looks in the WYSIWYG and source editors, as well as final page render. Note: In the source editor, it’s possible to use wrapper tags other than paragraphs (e.g. h1, h2, h3) but paragraphs seem to be the easiest for content authors to manage.

Hopefully this paints a clear picture of what the plugin can do and how to do it. You can see it in action at one of our sites and also at the Joomla Tabs and Slides plugin page itself. Enjoy!