logo wide 2000x350
This section explains how to use a special tool to easily add as many You Tube videos as you want to any article and add each video in a matter of seconds. With increased access to high speed Internet, videos are becoming very popular on websites. Sadly, many Joomla video tools are too complex for the average person to use. Most Youtube extensions are only for installing a video in a module (as indicated by the big red M next to the extension in the Joomla extension directory). You can then use Modules Anywhere to install the module in an article. We will review one of these free module tools in the next section. But what if you have a lot of videos you want to insert in your articles and you do not want to stop every time to put a video in a module before inserting it in your article?

If you understood HTML, you could simply right click on any You Tube video and copy the embed code. Then go to your Joomla article and click on Toggle Editor to paste the embed code into the HTML screen. But what if you do not know or understand HTML?

Other Joomla extensions have you copy and paste the Youtube URL into your article. The extension then automatically screens for all Youtube URL's and converts them into Youtube videos. But what if you want to post a Youtube URL without actually displaying the full video? What we really want is a video embedder with a button to insert it like we can insert images and READ MORE links with.

Thankfully, there is an extension which is not a module, does not require knowledge of HTML and does not automatically turn URLs into videos. Best of all, it comes with an INSERT VIDEO button and allows us to control the size of the video display window. In this article, we will show you how to use a free Joomla extension called Video Embedder to insert YouTube videos in your article simply by clicking on a button, then pasting in the URL of the video. Here is a direct link to this free responsive extension.

https://extensions.joomla.org/extensions/extension/multimedia/multimedia-display/video-embedder

Transfer the zipped folder to our website extensions folder. Then unzip the folder and install the button and the plugin separately with Extensions, Manage, Install.

Then go to Extensions, Plugins and enable the editor plugin so the button will work. Then enable the embedder plugin which is further down the list. Then click Save and Close. Now open our front page welcome article where we will put the video. We will open our Welcome Article and insert a two minute video that explains the benefits of Joomla. Here is the link to the video.

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

First, put in a couple of line breaks where we want out video to be inserted. Then click on the Embed Video button at the bottom of the workspace. We do not put the full URL in this box. Just the Youtube ID number which is Qjnc0H8utks

01

Then click Save and Close and view our Home page.

02

This is a very easy way to embed a video into an article. However, it has one drawback in that the video takes up the full width of the screen and there is no way to make the video smaller. If you would like to display the video in an article in a smaller box, the best available option is OSYoutube Free. Here is the direct link in the Joomla Extensions Directory:

https://extensions.joomla.org/extensions/extension/social-web/social-media/osyoutube

Click Download. Then enter your email address to get a Download link. Click on this link. Then transfer the tool to your website extensions folder and upload it to your site using Extensions, Manage, Install. Then go to Extensions, Plugins and open this tool to review its settings.

03

By default, any Youtube URL you insert into your article will be displayed in a box that is 425 pixels wide and 344 pixels high. You can change this to whatever you want. The only problem with this tool is that it will display EVERY Youtube video in a box – even videos where you only wanted to display the link to the video.

Thankfully, there is a way to display some videos in boxes and others in links with this tool. Change Ignore HTML Links from No to Yes.

This will cause the tool to only place a box around Youtube URL’s where the link tag has been broken (in other words the URL is only in plain text rather than as a link).

To see how this works, change Ignore HTML links from No to Yes. Also change Responsive from Yes to No (otherwise the video will once again take up the full width of the screen).

04

Then click Save and Close. Then go to any article, enter a couple of line breaks to create some space for our video and copy/paste the following.

To learn more about Joomla, please watch this 2 minute video.
https://www.youtube.com/watch?v=Qjnc0H8utks

Then click Save. Because this is an actual link, what is displayed on the front end of our site is the following:

05

Now go back to the article edit screen and break the link by selecting it, then clicking on the Unlink icon in the JCE Editor menu.

06

You will see the text change from blue to black confirming that the link is now merely a text URL rather than an actual link. Click Save to save the article. The video now displays in the front end in a little box:

07

Your guests can start the video by clicking on it which will reveal a button to make the video full screen while staying at your site. There is also a button allowing them to watch the video on the Youtube site.

Because this tool puts the video in an “iframe” centering the video can be a challenge because we need to center the entire iframe. This cannot be done with the JCE editor. Instead, we need to add the following to the Template, Edit, Custom tab:

iframe { display: block; width: 500px; height: 300px; margin: 0 auto; border: 0;}

Here is the result:

08


Now that we know how to place a video in an article, in the next chapter we will cover how to place a video in a module.