This website is being moved to Hitko.eu. A new version of Videobox, including the documentation and support for the latest version is available on the new website.The documentation for Videobox prior to version 4 will be available here for a limited time only before it's discontinued.

Videobox

Videobox is Joomla! 2.5.x and 3.x plugin that enables you to insert video and audio in your articles. It supports videos from YouTube, Vimeo, and Youku, as well as HTML5 supported video and audio formats. There are 3 different ways to insert videos in your articles: embedded player, box with thumbnail and a gallery. Videobox also comes with a wide range of settings to customize each of displays. You can use unlimited amount of different display methods in single article and each of them can have completely different settings.

Single video

Single video is most common use of video in an article. It's very basic: all you have to do is to insert video ID or URL inside two videobox tags. Let's take a look at some examples below.

1. YouTube video

{videobox}KKWTdo5YW_I{/videobox}

2. Vimeo video

{videobox}2144195{/videobox}

3. HTML5 video

{videobox}http://hitko.si/files/sample%20videos/chicken.mp4{/videobox}

4. HTML5 audio

{videobox}http://hitko.si/files/sample%20videos/dark.mp3{/videobox}

If you look at source code of this HTML5 video and audio players, you'll see something like this:

<video controls="" poster="/plugins/content/videobox/showthumb.php?img=%2Fhome%2Fkriznisk%2Fhitko%2Ffiles%2Fsample%2520videos%2Fdark.mp3&amp;width=640&amp;height=363" style="width: 100%; height: 100%; display: block; background: #000;" id="video_4_1">
   <source src="/files/sample%20videos/dark.oga" type="audio/ogg">
   <source src="/files/sample%20videos/dark.mp3" type="audio/mpeg">
   <source src="/files/sample%20videos/dark.wav" type="video/wav">
   <source src="/files/sample%20videos/dark.m4a" type="audio/mp4">
   <source src="/files/sample%20videos/dark.webma" type="audio/webm">
</video>

As you can see, there are 5 sources listed there although there is only one used for plugin call. Videobox tries to insert 5 versions of same audio file (.oga, .mp3, .m4a, .webma, and .wav) so you need to insert only one of them in your plugin call. It works the same way with HTML5 video, where supported extensions are .mp4, .ogv, .webm, and .m4v. Of course, audio files have no graphic to be displayed when it's playing. Videobox searches for any images in audio file's folder and if there is one with same filename as audio file, it uses it as player background; if there is no such image, it uses default background image which is in css folder in videobox directory.

Single video parameters

Here is a list of plugin parameters that affect single video display: 

  • width - it sets player width
  • height - it sets player height
  • style - this parameter is used to add any custom style to player container, for example to align player to the right or to the center
  • play - this parameter can be set to 1 or 0, to determine wether video starts playing when loaded or no
  • class - this parameter can be used to add extra class to player container

 

All these parameters are separated by commas and inserted after || inside plugin call.

1. Custom size video

{videobox}KKWTdo5YW_I||width=898, height=508{/videobox}

2. Centered video

{videobox}2144195||style=margin: 0 auto; width: 640px;{/videobox}

3. Video with custom class

Our template has class video_right with style float: right;. Here is video with that class:

{videobox}http://hitko.si/files/sample%20videos/chicken.mp4||class=video_right{/videobox}

4. Video offset

There's a special parameter that is applied differently than other parameters; this is offset. We use it when we want video (or audio) to start playing with certain offset. It can have on of the following forms: hh:mm:ss, mm:ss, or ss and is inserted right after player source, separated by #. Other parameters are still separated by ||, for example KKWTdo5YW_I#0:23||width=898.

{videobox}http://hitko.si/files/sample%20videos/dark.mp3#0:23{/videobox}

As you can see, player above is set to 0:23 when it'd displayed.

Box display

1. Simple box display

Box display is meant to save space when you insert single video in content. It shows video thumbnail and on click it displays player. To activate it, set box parameter to 1, for example:

{videobox}KKWTdo5YW_I||display=box{/videobox}

2. Box display parameters

First let's take a look at list of available box parameters:

  • width - player width
  • height - player height
  • t_width - width of thumbnail image
  • t_height - height of thumbnail image
  • style - this parameter is used to add any custom style to box display, for example to align box to the right or to the center
  • class - this parameter can be used to add extra class to box
  • lightbox - can be 1 or 0, sets whether to use lightbox to display player or no
  • button - can be 1 or 0, sets whether to show play button on thumbnails or no

 

2.1 Custom box with no lightbox

Here we set box width to 275px and height to 206px, turn lightbox player you've seen above off and align box to the right. We have set some offset too.

{videobox}2144195#1:15||display=box, t_width=275, t_height=206, player=inline, button=1, style=float: right;{/videobox}

As you can see when you click on thumbnail, it resizes to default payer size and starts playing inserted video. To prevent box from resizing when clicked, you have to set width and height to same value as t_width and t_height.

DragonForce - Trail of Broken Hearts (sample midi cover) DragonForce - Trail of Broken Hearts (sample midi cover)

2.2 Box title

Would you like to add some caption to your box? Why no? Just add |your title after video and offset. For example:

{videobox}http://hitko.si/files/sample%20videos/broken.mp3|DragonForce - Trail of Broken Hearts (sample midi cover)||display=box{/videobox}

Links

1. Use of Links display

There are situations where you don't want to insert video nor video thumbnail into your content, but still want to have a link to the video you're talking about, so user can watch it. When I'm talking about this, I can mention that I've listened to a song called Grounded and you can click the link, which opens a player with that song. 

I can also list some songs I like, for example Amaranthe - 1.000.000 Lightyears, Tarja Turunen - In For A Kill, Grave Digger - Home at Last, and then keep talking about Videobox, without distracting people with images and other effects.

Of course I've distracted you by inserting videos that don't relate to other parts of the sentence, but as you can see, there's just plain text, no images, no video players, and when you click the link, instead of taking you to some other page, the video plays right here, so you keep browsing here instead of going to YouTube and possibly staying there watching cat videos. And the best part? This works for local videos too.

The code for the first paragraph is this:

There are situations where you don't want to insert video nor video thumbnail into your content, but still want to have a link to the video you're talking about, so user can watch it. When I'm talking about this, I can mention that I've listened to a song called {videobox}Joh2urRQwWg|Grounded||display=links{/videobox} and you can click the link, which opens a player with that song. 

And for the second one:

I can also list some songs I like, for example {videobox}6DbAruY9z-w|Amaranthe - 1.000.000 Lightyears|, ZNWKIKZe1dk|Tarja Turunen - In For A Kill|, bxwnz_LI-jE|Grave Digger - Home at Last||display=links{/videobox}, and then keep talking about Videobox, without distracting people with images and other effects.

As you see, the code is the same as for single video / multiple videos, the difference is that it's inserted directly into other text and there's a links parameter set to 1. You can also set this parameter globally in Videobox settings. 

2. Link parameters

Link parameters are pretty much the same as parameters for other displays. Here's a list of them:

  • separator - text, which gets inserted between links when inserting more than one video at a time
  • width - player width
  • height - player height
  • style - this parameter is used to add any custom style to links
  • class - this parameter can be used to add extra class to links
  • lightbox - can be 1 or 0, sets whether to use lightbox to display player or no

 

3. Links with no Lightbox effect

This probably isn't really useful feature, but since there's an option to have no-lightbox player for galleries and box videos, I just figured I'll add this option for links too. So here's the list of the same songs as above, this time without lightbox effect: Amaranthe - 1.000.000 Lightyears, Tarja Turunen - In For A Kill, Grave Digger - Home at last. I hope these links haven't distracted you from reading this filler text I've put around to demonstrate how the text behaves when you're having a non-lightbox video links. As you can see when you click one of these links, the video player expands from the side and starts playing. Also, you can see that the clicked link voids, and then re-appears when you close the player or open another video. It's been made this way to avoid problems with positioning the link around the video, to save some space, and, after all, to avoid the chance of accidentally closing the player by clicking the same link twice.

The code: {videobox}6DbAruY9z-w|Amaranthe - 1.000.000 Lightyears|,
ZNWKIKZe1dk|Tarja Turunen - In For A Kill|,
bxwnz_LI-jE|Grave Digger - Home at last||display=links, player=inline, width=360, height=205{/videobox} 

Gallery

There, you have some boxes in your article and they work great, thanks to Videobox. When you're adding more and more videos, amount of boxes in your article increases quickly and it's hard to keep track on them, because they're all over page content. So now you want some kind of gallery for them. There is gallery display included in Videobox. All you need to do is to list your videos inside Videobox tag, separated by |, (vertical line and comma). You can put each video in it's own line for better visibility. In this example, each video also has a title. 

{videobox}6DbAruY9z-w|Amaranthe - 1.000.000 Lightyears|,
ZNWKIKZe1dk|Tarja Turunen - In For A Kill|,
http://hitko.si/files/sample%20videos/chicken.ogv|Running chicken|,
bxwnz_LI-jE|Grave Digger - Home at Last|,
/files/sample%20videos/broken.m4a|DragonForce - Trail of Broken Hearts (midi sample cover)|,
qDqWWtqMoW4|Striker - Let It Burn|,
http://hitko.si/files/sample%20videos/dark.mp3|Dark Moor - The Dark Moor (midi sample cover)|,
MNESu-ChMXY|Borknagar - The Earthling|,
http://hitko.si/files/sample%20videos/horse.mp4|Horse walking around|,
PJwo6bMKBaw|Korpiklaani - Rauta|,
-f8V1QSf7yg|Van Canto - If I Die In Battle|,
http://hitko.si/files/sample%20videos/seasons.mp3|DragonForce - Seasons (acoustic) (midi sample cover)|,
manW5v-AR7U|Storm Corrosion - Drag Ropes{/videobox}

Gallery parameters

Joomla 3.x demo

Videobox on GitHub

Download (By downloading you agree to GNU/GPL license)

Videobox BETA

FAQ

Previous versions

Videobox 1.0.0

Videobox 1.0.1

Videobox 1.1.0

Videobox 1.1.1

Videobox 1.1.2

Videobox 2.0.0

Videobox 2.0.1

Videobox 2.0.2

Videobox 3.0.0