logo wide 2000x350
In the last section, we described how to insert a video in an article. However, there may be times when you want to display a video in a module. Articles are always located in the “Main Content” area of your website while Module boxes can appear either above or below the main content area. It is possible to simply copy the embed code off of a Youtube video and insert this into the html section of an html module. However, this can create problems for those not familiar with html coding. We will therefore use a free Joomla extension called SJ Video Box to insert the following video into the module.

01

https://www.youtube.com/watch?v=Qjnc0H8utks

Go to JED, Social Web, Social Media

https://extensions.joomla.org/extensions/extension/social-web/social-media/sj-video-box

SJ Video Box is a free and responsive Joomla module to display YouTube and/or Vimeo videos on your website. There are several settings you can set for the video. Equally important, there are several ways to add text above or below the video. To get this free module, click Download. Then click Download again. Then save the Zipped folder to your Downloads folder. It says “Unzip First.” This means you need to unzip the file in your downloads folder before uploading it to your website. Next, upload the module to your website with the Extension Manager. If the Template Uploaod screen says, “SJ Video module could not find the XML setup file” try uploading it again.

Then go to your Module Manager and open the module. There are five tabs. We will first review the Module Tab.

02

We first want to change or hide the title. We then want to assign the module to a module position on our template. We will use above_columns_1.

Below is what it would look like if have two modules and you change the titles and then leave Show Title set for Yes.

03

The second box to set is called URL video.

04

Unfortunately, what we need to put here is not the normal URL of a Youtube video. The normal URL is as follows.

https://www.youtube.com/watch?v=Qjnc0H8utks

What we must insert is the EMBED url. To do this, we need to delete watch?v= and replace it with embed/

https://www.youtube.com/embed/Qjnc0H8utks

Then paste this code into the module URL video box. The format to use for a vimeo video is http://player.vimeo.com/video/1234567

The next three boxes on the module tab are the Video Titles box, the Thumbnail Images box and the Thumbnail Description box.

05

All three of these are displayed below the video and all three can be turned off. The Video title will be displayed in bold. So if you want the title below the video, turn off the module title and leave the video title turned on. If you want the title above the video, then turn off the title, image and description below the video and rename the module to the title you want to use for the video.

Below are the remaining items on the module tab.

06

There are two layouts to choose from. The second layout is to display and play more than one video in a slider format. Autoplay Video should nearly always be set for No as should Auto Play Slider and Show Image. The Number per page refers to the number of videos in a slider format. You can have up to six videos. But it is best to leave it set to one or two videos per module. If you set the title for Yes, then two videos will look like the following.

07

The lower title uses the H3 tag which can be reset in your editor.

Below is what a single video would look like in this module.

08

The next tab is the Description tab. It provides a link to their forum and says that you have to register your domain. But given that it is listed as a free extension in the Joomla Extension Directory and on their website – and in neither place does it talk about licensing, we can skip this tab.

The next tab is the Menu Assignment tab. To have the module only appear on the Home page, click “Only on the pages selected.” Then select NONE. Then select the Home page.

09

The final tab is Advanced.

10

Here you can add pretext – which would appear above the video – or posttext – which would appear below the video. These are actually HTML boxes meaning you can add HTML tags or inline CSS to style the appearance of the text above or below the video. When you are done with all of the tabs, click Save and Close. Then view the video on your website to make sure it works properly. You should try the video in several web browsers as videos are sporadic in terms of working on some browsers but not others. At a minimum, try the video in Firefox and Chrome.

Add a Second Video in a Second Module

You can have as many videos as you want. But Youtube Videos are best displayed two across. To create a second module, you can either select the first module and click Duplicate. Or in the Module Manager, you can click New, then select the SJ Video box from the list. Either way, repeat the steps only using a different video with a different title and placed in the above_columns_2 module position. Here is the URL for another Joomla YouTube video:

https://www.youtube.com/watch?v=EfsOibCaQ-k

https://www.youtube.com/embed/EfsOibCaQ-k

If you are comfortable with CSS and you want to improve the display, you can open your file manager and make the following changes:

In .sj-video-list-item padding: 20px 0;

In mod sj video box .css line 14. make it 10 px.

.sj-video-list {

display: none;}

We now have the ability to put a video into either a Joomla article or a Joomla module. We can even place a video in a module and place the module in the article. In the next chapter, we will describe how to add a blog to your website.