With the advent of High Speed Internet, videos have become an increasingly popular and important part of modern website. There are at least three ways to add video to your Joomla website. First, you can download videos from sources such as You Tube or make your own videos and then upload the video files to your site through your Joomla media manager. Or you can embed a link in your articles/pages to the actual video. Or you can place a link on one of your web pages to the page where the video is located.

There are advantages and drawbacks to all three methods. This article will begin by discussing the first method of using your own video files. The advantage of this method is that you have complete control of the file (you do not have to worry about broken links). Another advantage is that you can keep viewers in your website (you are not forcing them to go to another website from which they might not come back). The drawback is that it is difficult to upload and keep big video files on your website. Your web host/server may even place limits on what you can upload. So this method is most appropriate for shorter videos. Another drawback is that videos come in many different file formats. You will need to add the exact video file format you want to your list of permitted Joomla files (steps for doing this are described below).

There are also several Joomla extensions for adding video files. This article will cover how to add

All Videos Reloaded (AVR), one of the best free Joomla extensions, which enables you to download almost any video from any source and display it in any position on any page of your Joomla website. There are basically eight steps to adding AWR to your website:

1. Change your Site Configuration Media settings to permit video files such as FLV.
2. Add a folder called videos under the images/stories section of your Media Manager.
3. Upload your video(s) into your videos images/stories/video folder
4. Download the AWR software from the Joomla Extensions Directory (JED) to your C drive.
5. Upload the AWR software to your Joomla website using Extensions > Install.
6. Enable and Configure AVR plug in, component and module.
7. Add a new article using AVR to link to the FLV video in your video folder.
8. Add a new menu item linking to your new video article.

The first five steps only have to be done once to set up your video system. The remaining steps need to be done each time you add another video. Note that the process for embedding a link to another website is just a shorter version of what is described below (no need for steps 2 and 3).

STEP ONE: Change your Site Configuration Media settings

Unfortunately, the default Joomla media settings do not permit standard video files such as FLV. Hopefully this will change with future versions of Joomla, but for right now, you must take a few simple steps to allow FLV files (and/or other video file types, such as Apple Quicktime MOV files) to show on your Joomla website.  Before uploading a FLV file to the videos folder, you also must change the settings in the SITE > Global Configurations > System > Media Settings > Legal Extensions Section. From the Joomla Control Panel, select SITE > Global Configurations:

Then in Global Configurations, select the SYSTEM Tab:

Scroll down the page to the Media Settings section. You will notice that Flash FLV files are not one of the Legal Extension (File Types). However, if you type in flv, (with the comma) and then use your pointer arrow on your key board to reach the CAPITALIZED files and type in FLV, (with the comma), the Media Settings screen will look like the following:

The problem is that modern Flash Video files end with the extension, .flv. The Joomla Media Settings “Legal Extensions” (only some of which are shown in the screen shot of the top box) are limited to the following 18 file types (and their capitalized versions):

bmp,csv,doc,epg,gif,ico,jpg,odg,odp,ods,odt,pdf,png,ppt,swf,txt,xcf,xls,BMP,CSV,DOC,EPG,GIF,ICO,JPG,ODG,ODP,ODS,ODT,PDF,PNG,PPT,SWF,TXT,XCF,XLS.

So Shockwave Flash videos (ending in SWF) can be downloaded. But this is older technology.

FLV is a newer file type which compresses videos better than past video file types (such as SWF). FLV therefore allows for quicker downloads of videos and is the preferred video file type at the moment. (this may change within the next year). It is also the main file type used on video exchange servers such as You Tube. It is therefore important to adjust the Joomla Media settings to permit downloads of FLV files if you want to post FLV videos on your Joomla website. Hopefully, future versions of Joomla will fix this problem. But I the mean time, at a minimum, the Default Media Extensions settings must be changed in order to permit downloads of FLV (and other modern video) files.

Leave the FLASH uploader set for NO because we will not be using the FLASH uploader.

Be sure to click SAVE to return back to the Joomla Administrator Control Panel.

STEP TWO: Adding a videos folder to your Media Manager

Joomla also does not currently have a separate folder for videos to be stored in. Because your AVR extension assumes you have a folder called images/stories/videos, we will have to make the folder and put the videos in the folder in order for the AVR extension to work. For this step, go back to the Joomla Administrator Control Panel and select SITE > Media Manager. When you open the Media Manager, one of the initial options available to you is the choice of viewing your files and the associated information about them. The two options are "Thumbnail View" and "Detailed View".

Thumbnail View: The first (and default setting) is called Thumbnail View. This offers a thumbnail preview of your files and a delete button below each file. Thumbnail View is great for a quick scan of your files (especially images), as you can actually see the list and a thumbnail icon in front of you. This view, however, can be cumbersome when dealing with larger quantities of files.

Detailed View: The Detailed View option shows a five column layout. This contains additional information about each file. The following information is offered in the Detailed View:

o File Preview

o File Name in alphabetical order

o Image Dimensions

o File Size

o Delete option

It is a simple click to switch between both of these view types. Depending on the directory you are in and how many files are contained within this, you may find that you often use both of these views.

Organizing your content

By default, the Joomla! Media Manager contains a number of subdirectories (folders) which are in a column to the left of the Media Manager. By clicking on the folders in this tree structure, you can show their content in the right-hand section of the Media Manager. Navigation through subdirectories in the Media Manager can be done using this method, or by clicking on the folders in the right-hand section which will also show the contents.

The organization of your website media content is of utmost importance. Just like with your Joomla! Articles, the correct structure of your files can save you time and frustration down the line when you want to easily find an image or media file. One of the limitations in the current version of the Media Manager is that files cannot be moved into other directories. This means that it's important to get your file structure correct at the start of the project, and then files can easily be uploaded to their destination.

Creating a new directory

At the top of the Media Manager, you will see a horizontal bar showing the current directory location you are in. New directories can be easily created in the Media Manager by using the Create Folder, situated to the right of this bar. To make a new directory, first make sure that you are in the directory where you wish to create a new folder. Populate the text field to the left of the Create Folder button and then click on this button to create your new directory with that name. The page should reload, showing your new directory in place. A forward slash is already pre-populated, so you only need to enter the name of the directory and nothing else. Just like with your Joomla! Articles, the better you organize your site files, the easier it is to manage these on an ongoing basis.

Deleting files

If you are not using your files any more or have created newer versions of them, then you can easily delete them by clicking on the red "X" icon next to the file type. If you wish to delete multiple files at once, then you tick the checkbox next to each file, and click on the Delete button in the top-right of the Media Manager.

Uploading your content

The default uploader in the Media Manager is the single file upload tool, which is located at the bottom of the Media Manager. This tool will allow you to browse your local computer for a single file type, and upload this to your web server in the directory you have chosen. To upload files using this method, first make sure that your destination for the file upload is correct. The easiest way to do this is by using the Folder Directory Menu on the left-hand side, and making sure the directory you want to upload your file to is highlighted.

To upload a file, click on the Choose File button. This will allow you to browse your local computer for the file to upload. Once selected, click on the Start Upload button to upload this file to your chosen directory on your web server. The Media Manager will refresh once the file is uploaded and you should see your new file inside your selected directory.

Multiple file uploads: At the time of writing this article, Flash 11's security settings have broken the built-in Joomla! Media Manager Flash Multi-file upload tool. This may be addressed in future releases of Joomla! However, the single file upload feature is the stable upload tool to use at present. Also clicking on ENABLE the FLASH UPLOADER disables the normal single file uploader. It is therefore recommended that you NOT enable the Flash loader or use multiple uploads until this problem is fixed.

Adding the images/stories/video folder

First set up a folder call "videos" inside your Control Panel Media Manager. By default this folder is called "videos" and resides within images/stories.

After typing in “videos” in the box on the far right, click on the gray box called “Create Folder.”

Joomla will then reset the Media Manager folders to look like the following:

So the full path to this folder would be images/stories/videos.

STEP THREE: Upload your video(s) into your videos images/stories/video folder

Now we are ready to add a Flash FLV video to the stories/video folder.

Select SITE > Media Manager > stories > videos to open the videos folder.

Your screen will now look like the following:

To place a Flash FLV file in the videos folder, scroll down to the bottom of the page to the Upload File section and click on the BROWSE button. Then find the video file you want to upload (which hopefully you have already downloaded to the C drive of your local computer) and select this file.

After the video appears in the box to the left of the BROWSE button, click on START UPLOAD to upload the file to the videos folder. Depending on the file size of the video, this may take a while.  When the upload is complete, Joomla will let you know that you now have a Flash FLV Video which you can display anywhere you want on your website:

STEP FOUR: Download the AWR software

Go to the Extensions page of Joomla.org to download the free Joomla Plug In: All Videos Reloaded (AVR) onto the C drive of your computer.

http://extensions.joomla.org/extensions/multimedia/video-players-a-gallery/3955

Click on the download button to download the program to your C drive. You can also read and/or copy the information on the DOCUMENTATION page to learn more about how to use the program. There is also a DEMO site which shows the program in action.

STEP FIVE: Upload the AVR software to your Joomla website

Upload this extention into your Joomla website with the Extensions Install process. From the Joomla Administrator Control Panel, click on EXTENSIONS > INSTALL. Use the BROWSE button to find the AllVideosReloaded program on your computer. Select this to place it in the browse window:

Then click on Upload File and Install. Joomla will install the program and let you know that it was successfully installed.

STEP SIX: Enable and Configure AVR Extension

With all Joomla Extensions, you will have to “enable” them for them to work. This Extension has several parts (the screen above shows that Joomla installed three plug ins and one module). Each of these components will need to be enabled for the program to work.  When the program is downloaded a screen appears telling you how to use the program. Unfortunately, it fails to mention the “enabling steps”!

First go to EXTENSIONS > Plug In Manager: Note that all three plug ins mentioned above are already enabled (one of the plug ins is on page 2).

Next, go to EXTENSIONS > Module Manager. Notice that the AllVideos Reloaded program is DISABLED (Module 11 with a Red and White X).

To enable and configure the module, select and click on EDIT (or simply double left click it to open it). This will bring you to the Module -Edit Screen:

In the Details section, insert the following settings:

Show Title: No

Enabled: Yes

Position: User 4

Menu Assignment: Select Menu Item > For now, put the module on the Front page only. Adjust later when a video page and menu item has been created to place the video on. Then click APPLY.

You are now ready to write an article and insert a FLV video into the article.

STEP 7: Three Ways to Add a Video to a Joomla article

There are at least three ways to add a video to a Joomla website. To first is to add a video stored in your personal video collection using the AVR extension either by starting a new article or open an existing article. The second is to use AVR to link to an external video. The third is to provide a link to a video provided on a third party website, such as You Tube, without using the AVR program. We will describe all three methods beginning with using AVR to link to an internal video source such as your images/stories video folder.

Method #1: Add a Video from Your Personal Video Folder to any article:

Go to Content > Article Manager to either edit an existing article or create a new article. This will bring up the Article (EDIT) screen. The following is a new article called, Watch This Video. It is being Published, but not on the Front Page. It is placed in the News Section and the latest Category. The cursor is placed where the video will go:

Click on the AVR Media Button which is at the bottom of Articles (Edit) screen (assuming you have uploaded and activated the All Videos Reloaded (AVR) Extension):

Because we will be linking to a local video in the stories/video folder, click on the Local Media tab to switch to the following screen:

Clicking on the Media Drop down arrow shows the video “Capitalism” as our only choice (because it is the only video in our stories/video folder right now). Selecting this video causes AVR to automatically fill in the rest of the boxes.

1. • Media Type: This should automatically generate based on the video you chose above. If not choose which type of video it is: flv
   • ID: This should automatically populate based on the file name.
   • Width/Height: specify the width and height to match your site.

This is what the screen now looks like:

Click "Insert" and then close the AVR media box. This returns you to the Article (Edit) screen where the following tag was placed where the video will go in your article:

The link to the video is in the middle of the screen because the cursor was placed in the middle of the screen (by clicking align center) before clicking on the AVR button. Click "Save" to go back to the Article Manager page. Joomla will let you know if you video has been successfully loaded into the article:

Method #2 Use AVR to add a YouTube Video which is not in your stories/video folder:

First, you must open the article/ content item where you want to place the video. Place cursor where you want the video to be placed (use align center if you want the video to be in the middle of the screen.

Click on the AVR Media Button at the bottom of the article (EDIT) screen. Look under the tab for "Remote Media" Fill in the following Categories

1. • URL: Type in the URL to the YouTube video that you want to place on your site
   • Provider: Scroll down and choose "youtube (original player)"
   • ID: This should be filled in with the ID for the video. This is usually the second part of the URL or whatever comes after the equal sign. For example if this was the URL of the video you wanted to insert: http://www.youtube.com/watch?v=4x3UezyOEkI  then the ID would be 4x3UezyOEkI
   • Width/Height: specify the width and height to match your site. It is recommended to make all videos the same size. Ex: 400 by 320 is a good size

Then click "Insert" and then close the AVR media box, Click to "apply" to stay on editor screen and check the site to ensure the video is showing up

Method #3 Add a Videos Using HTML instead of AVR

If you have uploaded a video called youtubecapitalism.flv. , you can add this videos to any content item simply by adding the text

Adobe Flash Player not installed or older than 9.0.115!

wherever you want in the article.

Method #4 Using the You Tube ID to insert a You Tube Video

If you go to You Tube, you’ll see that they all have ID numbers’s indicated by = ID#

The reference you would type into your article would be:

Adobe Flash Player not installed or older than 9.0.115!

Method #5 Adding a Quick Time video

In Global Configurations > Systems > Media settings, add mov and MOV to the list of legal extensions.

Navigate to the Article Manager through the top menu and open an article.

Change the name of the video file between the { } and {/} tags within the text editor to the new filename. Depending on the format of the video being presented, the code should look like this:

This code displays a QuickTime movie within the article. Save the changes.

Method #6: Updating a YouTube video

If there is already a YouTube video playing within your website, then there is a plugin installed within your site to make this happen. Go to www.youtube.com and copy the relevant URL code for the link.

Navigate back to the Article Manager in your Control Panel and locate the article. Highlight the code for the old video link within the text editor and paste the code from YouTube over it. Save these changes to your Article and the new video link will play within the article in the same place as previously.

Changing the YouTube video dimensions

Say you need to change the dimensions of the video, such as the height and the width:

1.Navigate to the Extensions menu.

2.Select Plugin Manager and navigate through the list until you see Content | All Videos Reloaded in the drop-down list.

3.Double Click the Content | All Videos Reloaded link to view the parameters for this plug-in and change them as you would like.

4.Click Save to make your changes and view your updates on the live site.

It is an easy matter to expand the video size to 500 wide by 400 high.

This page also has a “Show full screen” button under “Advanced Parameters”

Clicking this option adds an icon to the video viewer which expands the video to full screen. Clicking it again or pressing ESCAPE returns the video to the normal size.

STEP 8: Adding a new Menu Item link to your video

Once you have created a new video web page, it is a simple matter to add a link to the page. Go to MENUS > Main Menu to reach the Menu Item Manager. Click on NEW to create a new menu item. Click on Page Layout (twice). Then give the menu item a name, link it to the video article and place it where you want it to appear on the Main Menu. Then click SAVE. Be sure to click on the preview button to insure the video actually works when you click on the Menu Item and then click on the start button of the video

The next task is to create a Menu Item link to your new page so you can see how it looks and verify that the video will actually play. To create a new Menu Item, go to Menus > Main Menu to get to the Menu Item Manager for the Main Menu. Click on the New button in the upper right corner. For Select Menu Type, select “Articles” On the next screen, select Article Layout.

This will bring you to the Article Layout screen. Title the Menu Item “Watch This Video”.

Then in the upper right corner, use the Select button to navigate to the article we just created.

Click the SAVE button to return to the Main Menu Item Manager screen.

Now click on the Preview button in the upper right corner to bring up the Home page.

In the Main Menu, you’ll see a link to the You Tube video page. Click on this.

This will bring up the following page:

Click on the Start arrow to watch the video. (Note: If you have a slow speed dial up connection, it may take a while to play).

Adding a Screen Shot to a video

Some videos in your personal collection may not show up with a screenshot on your webpage. If this is something you want to add, follow the steps below. For FLV files only the following will work:

1. Take screen shot of your video. This can be done either by using the "print screen" key on your keyboard (usually FUNCTION + INSERT) and then editing the picture in photo shop (crop, change size to match video, change resolution to 72 etc.) and save it as a jpg. OR if you cannot capture a still shot by this method:
   • Download Frame shots program: http://www.frame-shots.com this will cost $30 dollars
   • Open video in frame shots and click play
   • When you see the still shot you want to use click on the "Take Snapshot" button (adjust Height and width as desired to match video file)
     

1. • If you like the image you captured click on "Save Thumbnail" and save it on your computer.
     IMPORTANT NOTE* THE PHOTO/SCREENSHOT MUST HAVE THE SAME NAME AS THE VIDEO

1. Once you have the screen shot saved that you want to use for your video, you need to upload it into the folder where you are storing your videos /images/stories/videos
2. Next you need to go to the article where the video has been added and change the code to match the following:
   • In your content the video code should have read something like this:
     Adobe Flash Player not installed or older than 9.0.115!
     
   • To add a screen shot change the code to look like this:

Adobe Flash Player not installed or older than 9.0.115!

1. Save or apply and you are done.

Congratulations! You now not only have a video on your website, but you have a system in place for adding more. Our next article will review how to add a feedback form to your website.