Embedding a Video into a Joomla Article

This is an in-depth tutorial article about embedding a youtube video into a Joomla article. Topics covered are:

  1. Hunting down the hard-to-find Youtube embed code.
  2. Logging into Joomla and finding the right article
  3. Using Joomla Code View to insert the Youtube embed code.
  4. Verifying that the code was inserted correctly.
  5. Centering a youtube iframe
  6. Saving a Joomla article.
  7. Clearing a Joomla cache properly so as to see your changes immediately.

First, navigate your browser to the video you wish to embed.

1-navigate-to-youtube-video

Locate the “share” button below the video. Clicking it will bring up the video’s URL.2-locate-share button

Click the “Embed” link below the Share link. A line of code will display, copy this code with Ctrl+C.

3-click-embed-to-get-embed-code

Now that your clipboard is armed with the youtube embed code, login to your Joomla Administration panel.

4-login-joomla

Once logged in, click the Content drop down menu, then click Article Manager. Do not click Add New Article if you wish to modify an existing article.5-article-manager

If you have many articles, type in the name of the article you wish to add a youtube video to in the the Filter box, and click Search. Then click the title of the article to edit it.
6-search-article

 

Once inside the edit panel, locate the Source Code Editor button with the little arrows on it. The button is circled below. We can’t use the WYSIWYG editor panel when adding raw code.
7-reveal-source-code

Now locate the spot within your code where you wish to add your video. In this example we are adding the video directly below the line “First cars than pedestrians!” Previously there was a broken video playing module here which I’ve already deleted in this example.8-find-spot-for-video-to-live

Paste the code from the Youtube video using Ctrl+V or via the right click menu. If you grabbed the right code, it should begin with the word iframe. If it doesn’t, you should go back to your youtube video and try to grab the code again.

As you can see our video width is 560 pixels. This is a good width for most purposes but if you need smaller or larger, you can go back to the youtube video and specify a different size.9-paste-iframe-code

Once your code is pasted in, click the code view again to see your article in WYSIWYG format again. If a big yellow box has appeared you inserted the code correctly!10-verify-video

Optional: I like to center all my videos and images in the page. You can do this to by clicking the white space beside the yellow box, and clicking the “center” button. It’s the same button used in Microsoft Word so it should jump right out at you.11-center-video-if-want

Clearing the Joomla Cache

This step is only necessary if you use caching software on your website. I use it to speed up page load time but a Joomla site does not come with it enabled by default. So if you are not sure if you are running a Joomla cache, you can skip this step.

For JotCache, hover over Components and click JotCache.

12-clear-cache

Clearing the Joomla default cache is an all-or-nothing affair which is why I prefer to use JotCache which lets you clear just one article without affecting the rest of your cached pages.

You can clear a single article out of JotCache following these 3 simple steps.

  1. Type the article title into the Title Search box.
  2. Click the check box beside the article you’ve just changed.
  3. Click Delete Items to clear just the selected items. Do not click Delete ALL or else you will clear your entire cache and the server will have to work very hard to rebuild it.
  4. A prompt will appear to ask if you are sure. Click Yes!
    13-search-article-select-delete-items

A blue box will appear letting you know the deletion of page cache items was sucessful.
14-delete-cache-successful

At this point your changes should be live on the website. Navigate to the public-facing article and you should see your video in all its splendor!

15-browser-test

Locate the “Share” button below the video.

 

Leave a Reply

Your email address will not be published. Required fields are marked *