Embedding Web Video in Joomla

Using a Module in Joomla for Video Embed Codes

Embedding video in Joomla is easy once the embed codes are added to a module, but this requires using the text mode for the module editor and switching off content filtering for the script tag. These steps guide you through this.

You can see examples of Joomla embedded video and popup video in these links:

Joomla 1.5

Joomla 3.0

1. Switch off filtering

There are 2 steps to this if you are using the TinyMCE editor by default.

1. Switch off the article content filtering for the Super Administrator / Super Users:

In Joomla 1.5 and nearby versions:
From the article manager click on 'Parameters' on the toolbar at the top. In the window that opens at the bottom select all user types except for the Super Administrator. The filter type should be 'Blacklist' which is the default. Click save.

In Joomla 3.0+:
From the global configuration screen click on the 'Text Filters' tab. At the end of the user list is Super Users, set this to 'No Filtering'. Click save.

2. Modify the content filtering for the TinyMCE editor:

Select the Plugin Manager from the Extensions menu and click on the TinyMCE entry.

In Joomla 1.5 and nearby versions:
On the right hand side under the parameters section you will see a section like this:

In Joomla 3.0+:
Click on the 'Basic Options' tab and scroll down to the section that looks like this:

Remove any 'script' entry in the Prohibited Elements box. Removing everything caused the content filtering to not work for some reason. Click save.

2. Create a module of type 'Custom HTML'

From the Extensions menu select 'Module Manager', click on 'New' and from the list choose 'Custom HTML'.

Give it a title (choose something meaningful to the article that this module will be attached to, so that you can easily select it from the list at another time).

Give it a position - this refers to where the code will be added to in the page. It is generally ok to choose 'top' or 'footer'.

In Joomla 1.5 and nearby versions: From the 'Menu Assignment' section select the article(s) that this module will be used for.

In Joomla 3.0+: Click on the 'Menu Assignment' tab and select the article(s) that this module will be used for.

Now we are in a position to actually add the code to the module. In Joomla 1.5 and nearby versions this is the form at the bottom with the editor box. In Joomla 3.0+ click on the tab 'Custom output'.

At the bottom of the editor click on 'Toggle editor' to put it into plain text mode. Then simply paste in the code from the OptinPlayer wizard or the guide.

Remember to download the latest version of OptinPlayer from your account first, and to update the license in the code with yours:

<script type="text/javascript" src="../optinplayer/scripts/oplayer.js"></script>

<script type="text/javascript">
new oplayer('optinplayerJoomla').initialize(
      'content' : 'oplayer',
      'type' : 'popup',   
      'display' : 'auto',
      'flash' : 'http://www.optinplayer.com/videos/parrot.m4v',
      'html5' : 'http://www.optinplayer.com/videos/parrot.m4v',
      'width' : 570,
      'height' : 240,
      'border' : 1,
      'startImageLocation' : '../images/play2.png',
      'license' : 'c0de33d0d4aea7ce'

3. Add the embed <div> to your article

Remember to add the embed <div> to your article where you want your video to appear (note that if you are using a popup video this is only necessary if the popup is anchored to an HTML element using the 'anchored' option):

<div id="optinplayerJoomla" style="width: 0px; height: 0px;"><span style="visibility:hidden">op-placeholder</span></div>

Note that for Joomla we need a slightly modified form of the embed tag, using a span inside it. This is because Joomla removes any div element which is empty.

Click save and test by opening the article you created for this module. The same module can be used for any article by updating the module 'Menu Assignment' tab.

4. Additional notes on adding JavaScript to Joomla

When adding URL's:
Joomla or the TinyMCE editor will modify the URL's that you add for external JavaScript files. The best strategy seems to be to enter the full absolute URL the first time and let the system do what it wants when you save it. There is however an option in the TinyMCE editor to use absolute URL's if required.

Joomla / TinyMCE editor adds CDATA tags to JavaScript
Usually CDATA tags are added to the JavaScript on saving, this is fine and they should just be left in place.

Back to top