Update: this tutorial is out-of-date. This new Joomla video gallery tutorial is better, and so is this video grid tutorial. Both use the excellent OSYouTube.
The AllVideos plugin will allow you to display almost any type of media on your Joomla site, whether it's a video or audio file and whether you're using local or remote storage.
We're going to show you how to download and install the AllVideos plugin and then how to get the videos into your article. We also had a member request for a tutorial on making a video photo gallery, so we're going to do that also.
AllVideos works through the power of curly braces or brackets ... { }.
For example this will allow a locally stored mp4 file to play on your site: {mp4}yourvideofilename1{/mp4}
AllVideos lets you use wide variety of filetypes between the brackets for an incredible variety of choices. You can use {flv}, {wmv} and even {youtube} and {vimeo}.
Step 1. Download and Install AllVideos
You can get AllVideos here https://www.joomlaworks.gr/content/view/16/42/.
- After install go to Extensions > Plug-in Manager.
- Search for allvideos.
- Click the name AllVideos.
Step 2. Specify Video and Audio Folders
All Videos wants all of your videos and audio files to be stored in the same folder. If you already have them uploaded your videos, enter the folder path in the Local Video Folder and Audio Folder fields.
If you haven't uploaded your files yet, then we recommend creating and using an /images/videos/ folder and an /images/audio/ folder.
Click Save & Close after entering your settings.
Step 3. Create a new article
Go to your article manager. Either add a new article or go to the article you want to manage.
Step 4. Create a table
To create a videos gallery, we're going to create a table.
To enter the table code, we need to access the HTML for the article. This step depends on which editor you are using and whether or not you know how to put a table into the article. I am going to assume you have the default TinyMCE editor and you don't know much code. So if that's you, click on "Toggle Editor" or the HTML in the menu.
Step 5. Paste or write the table code
Here's the code to use for the table:
Here's what the table will look like in the editing view. You can of course do this without the table and all the videos will be stacked from top to bottom on the page.
So we're going to put {mp4} in curly brackets on the front, and {/mp4} in curly brackets at the end. Between those start and end tags we want to put the file name without the extension, like this - yourvideofilename - leave off the . and the extension letters.
For example, if your file is called yourvideofilename1.mp4 then you will write {mp4}yourvideofilename(/mp4}. iIf the file was stored locally and ended in .swf you would use {swf} in the brackets.
If you want to see examples of all the possible tags and tokens you can use, visit their documentation page: https://www.joomlaworks.gr/content/view/35/41/.
Step 6. Replace the text inside the token and between the brackets as needed.
Here's what the table looks like with YouTube videos. There is no need for messy embed codes.
Step 7: Four YouTube videos in a box.
Here's what the Youtube videos look like when published on our site. They are contained by the table, and the default size we could control in Step 2 will determine their width. You can do some customization in each individual article for some extra control.
Step 8. Advanced configuration
You can use syntax inside the start tag to change the appearance on the fly. The added syntax will override the defaults.
You can also use syntax like: {format/provider}filename|width|height|autoplay{/format/provider}. You use the pipe "|" character between each parameter.
For example, an "autoplaying" YouTube video of 100x150 dimensions would be displayed adding this to a content item:
{youtube}inTas4CAls_egj200|150|1{/youtube} - First in line is the file name, then the width, then height, and the final "1" indicates autoplay. If you don't want autoplay, make this a "0".
Step 9. Remote streaming services
In the example of the mp4 above we used local media, which means it's on the same server as the website. But you are not restricted to your own server. We already showed you how to use a streaming service - YouTube. There are many other services and all you need to do to use their media is to put the name of the service in the brackets. Here are a few examples
{brightcove}1656387563{/brightcove}
{yahoo}3169238/8981933{/yahoo}
{collegehumor}1824771{/collegehumor}
Step 10. Remote from another website
You can get remote videos from any website if you know the media type and the full URL to the video. Here are some samples of how you write the tokens to get video from another site that is not a streaming service. You need to indicate it's a remote source in the start tag.
{mp3remote}https://www.filehosting.com/pixies_bonemachine.mp3{/mp3remote}
{swfremote}https://www.filehosting.com/presentation.swf{/swfremote}
{mp4remote}https://www.filehosting.com/nadasurf.mp4{/mp4remote}
That's pretty much all there is to it. You just need to know the type of media, the location of the media and how to write the token. With this knowledge you can put any video or audio source on your website. Combine it with text and a little formatting with tables or divs, add some syntax to the tags, and you can create any arrangement you want to fit your design.