21 Nov 2017

Embedding locally hosted videos on a Joomla website

The Joomla Works All Videos plugin is a great addition to your Joomla website to display videos directly within your articles. Videos's can be hosted on a third party service such as Youtube or Vimeo, or can be hosted directly on your own webserver alongside your Joomla website.

However, in my experience I've found that there are a couple of issues that need to be resolved when hosting videos on your own web server:

  1. Using the plugins responsive settings doesn't work correctly, resulting in videos that don't span 100% across the page (or parent containers width)
  2. Once embedded, videos are displaying as a boring black square with a white play icon

These issues only arise with vidoes hosted on your own server, and not those hosted on a service such as Youtube or Vimeo.

This tutorial video addresses both those problems, and provides solutions to have your locally hosted videos displaying as anticipated.

There is some additional CSS code that is required, which can be found on my Bit Bucket page over here. This CSS snippet needs to be added to your Joomla theme's style sheet.

Note: In this tutorial video I use the Kraken template for Joomla, and the Kraken template for Joomla. Whilst it's not neccessary to use both of these it's worth mentioing that I add the CSS hack above directly into the Gantry parameters rather than append it into my themes style sheet. Both methods will work just fine.