Install HTML5 Video Player for Joomla

October 9, 2012 html5video HTML5 Video

Since the release of HTML5 Video Player several months ago, we have received many inquiries asking if the video players work with Joomla or not and how to install to their Joomla websites. Here we will put together the most frequently asked questions and solutions to help Joomla users to easily add the HTML5 video players to Joomla websites.

Step 1. Create Joomla HTML5 Video Player.

You can create HTML5 video for your Joomla website in a few clicks with Socusoft HTML5 Video Player. See the details here: Making Joomla HTML5 Video Player

Step 2. Upload HTML5 Video Player to your Joomla through FTP client

From the main interface of Socusoft HTML5 Video Player, go to the HTML5 menu >> Open Output Folder, you will find al video galleries and players created with this HTML5 video software. Select the HTML5 video gallery that you want to use in your Joomla articles. Use a FTP client to upload the video player to a sub-directory of your Joomla site.

Step 3. Add HTML5 Video Player to your Joomla Articles

The real challenge of adding a video player to Joomla comes from this part. Almost all Joomla content editors may clean up some codes. The TinyMCE is the default WYSIWYG editor for Joomla for instance, it cannot save Javascript.

The HTML5 video galleries created are based on JavaScript. If your Joomla editor can’t save the code, the video galleries will not work properly on Joomla sites. If you are willing to sacrifice the stylish video player, you can just use the HTML5 video with the default plain player. You can refer to this guide: How to Embed HTML5 Video into Websites?

In order to retain the stylish video player generated by Socusoft HTML5 Video Player, you can turn off the WYSIWYG editor or install a more powerful Joomla content editor such as the JoomlaCK. You can download it from its official site:

After that go to copy and paste the video player embedding code into your Joomla article. HTML5 Video Player will generate the code automatically when you create a video player. From the output folder you can find an ‘html5video.html’ file, use a text/page editor to open the generated ‘html5video.html’ file and switch to code view, then copy and paste the code into your Joomla article under the HTML code mode. See details here: Embed HTML5 video player to your webpage.

Install HTML5 Video Player for Joomla without a WYSIWYG editor

1. Turn off your Joomla WYSIWYG editor.

To disable the default WYSIWYG editor on Joomla, you can go to your Administrator screen then Site >> Global Configuration. Set Default WYSIWYG Editor, such as “Editor – TinyMCE” to “Editor – None” and click Save.

2. Edit the Joomla article, paste the video gallery embedding code into it and save.

Important Joomla Video Player Embedding Tips:

You can turn your editor back on after adding the video gallery to Joomla article. Your HTML5 video player and its code will be safe. However if you forget to set your editor to “no editor” next time you edit that article and save it, it will erase your code again . A good trick is to create a page module with custom HTML code, then insert the embed code into your Joomla article. Please read on.

Create Module with Custom HTML to install HTML5 Video Player to Joomla

1. First of all, make sure you have your Joomla editor turned off as in the previous section.
2. Go to Extensions >> Module Manager and click New. Choose “Custom HTML” to create a new custom html module.
3. Give the module a title.
4. Set “Show Title” to No.
5. Assign/ create the module a position.
6. Enter the video gallery embed code and save it.
7. Turn your editor back on from Site >> Global Configuration >> Default Editor
8. Edit your original article, and enter {loadposition modulename} and save your article.

The “loadposition” plugin renders the module contents in your article on the frontend. The modulename is whatever you entered in the “Position” field when creating your module.

Install HTML5 Video Player for Joomla with JCK editor

The JCK Editor is a standalone content editor for Joomla!™.  Its architecture is totally plug-in based and it can be extended and customised. Most remarkably the JCK Editor is free! Free for you to use and install on any of your sites under the GPL licence!

1. Download JCK Editor for Joomla
2. Log in your back-end Joomla administrator section
3. Go to ‘Extensions‘ and click on  ‘Extension Manager‘
4. Under ‘Upload Package File‘ click on ‘Browse…‘-> Navigate to the JoomlaCK Zip file -> select it -> click ‘Upload File & Install’.
5. Set JCK as default Joomla editor from Site >> Global Configuration >> Default Editor
6. Go to edit your Joomla article, switch to the HTML mode.
7. Paste the video gallery embedding code into it and save.

JCK Editor for Joomla Important Notes:

Make sure to find and download the compatible version with your Joomla installation from: .

Now you know how to install HTML5 video player for Joomla websites. If you have any questions, suggestions feel free to contact us through email or leave a comment bellow.

html5 video player joomla, joomla html5 video, joomla video gallery, joomla video install, player for joomla, video player joomla

HTML5 Video Autoplay iPad iPhone IE 9 HTML5 Video Player Control & Compatibility