Embedding Video Into Your Website

Embedding video, especially from YouTube or Vimeo or other such websites, is incredibly simple.  In this article I will provide you with step by step instructions on how to insert a video into an article in joomla.

First, these instructions are for people who are using Joomla as their website CMS.

IMPORTANT: If you are using Joomla and if you are using JCE Editor as your default editor to add or edit content on your website you need to make sure the JCE Editor will allow iframes.

Instructions on Embedding Video into Your Articles:

1. Go to Article Manager and Create a New Article.
2. Once you are in the article you can then write a description for your article using the WYSIWYG editor… this is the common interface you use to enter your text and apply formatting to it… it kinda looks like Microsoft Word.
3. Write your description and then hit an extra ENTER at the end.  This will create a line break where you can enter the code for the video.  You will need this line break in step 6, don’t worry about it right now.
4. Now you need to get the video embed code.  With YouTube, simply go to the YouTube page where the video is, then click the SHARE button.  This will then show you the EMBED code.  COPY ALL THAT CODE with all the tags.  Then go back to the article you created for this video on your website.
5. Click TOGGLE EDITOR.  This removed the WYSIWYG interface to enter text and shows you the raw code. Here we are entering pure code into the site so you need to get rid of the WYSIWYG editor interface.
6. Once you are into the pure code, scroll down to the bottom where you have the extra line break from when you added the extra ENTER at the end.  You should see <p> </p> or <p>&nbsp</p>.  Put your cursor in between these (<p> HERE </p>)
7. Now paste the code you copied from YouTube.
8. Click TOGGLE EDITOR again and you should see the video.  You can now click on that video so the whole box is highlighted and you can cut and paste it into other areas of the article you wrote or you can center it or right justify it.

Now that you’ve created it, you need to link it to a menu or put it into a module somewhere on your website.  If you simply wanted it to be in a module in the first place then instead of creating the article and embedding the video in the article you would go to Extensions, Module Manager, Create New Module, Select CUSTOM HTML and then follow the instructions above to embed the video into the module.  To then show the module in your template you simply need to assign the module to the module position you want on your site and select the menus/pages that you want it to appear on.

In the case with www.proball.com.au – we have embedded video into a particular CATEGORY, and then we created a menu link from the Main Menu that links to the CATEGORY we created.  The category is Community Basketball Legends (http://www.proball.com.au/home/community-basketball-legends.html).  We then wrote the article (embedding the video) and then we assigned it to the category Community Basketball Legends.  The main menu link is set to display all the articles from that category in a Category Blog Layout (like a newspaper) so that means every article I write to that category will automatically publish to that page without me having to create a specific menu link to it.

If you need some help setting up your website or planning for where your video should go into your website we can certainly help.  Get in touch with your WebsiteToGo rep and he or she can set it up for you.

Video Embedding Instructions with Screenshots

1. 1. Go to Article Manager and Create a New Article.

1. 2. Once you are in the article you can then write a description for your article using the WYSIWYG editor… this is the common interface you use to enter your text and apply formatting to it… it kinda looks like Microsoft Word.   Write your description and then hit an extra ENTER at the end.  This will create a line break where you can enter the code for the video.

1. 3. Now you need to get the video embed code.
      1. With YouTube, simply go to the YouTube page where the video is, then click the SHARE button.
      2. This will then show you the EMBED code.
      3. COPY ALL THAT CODE with all the tags.
      4. Then go back to the article you created for this video on your website.

1. 4. Click TOGGLE EDITOR.  

1. 5. Once you are into the pure code, scroll down to the bottom where you have the extra line break from when you added the extra ENTER at the end.  You should see <p> </p>.  Put your cursor in between these (<p> HERE </p>)

1. 6. Now paste the code you copied from YouTube.

Click TOGGLE EDITOR again and you should see article text and the video should now be embedded.  You will only see a yellow square or rectangle with a red dotted border.  You can now click on that video so the whole box is highlighted and you can cut and paste it into other areas of the article you wrote or you can center it or right justify it.

NOTE: If the article will not save or continually strips out the code you are pasting and appears not to accept the code you are inputting it is because you haven’t changed your settings to allow iFrames.  If you are using JCE Editor as your default editor program, please follow these instructions to enable iFrames

NOTE: If you are incorporating the video into a slideshow for a module area and the video is not showing up as an image in the slideshow then go to the article and ad an INTRO IMAGE.

To do this, go to the particular article you have created depending on your version of Joomla you might see a tab for Images and Links or this could appear below the article.  Go to this area and simple add an Intro Image.  Refresh your cache and you should see the video.