Embedding YouTube Videos (Joomla 3)

A lot of users are interested in embedding YouTube videos in either an article or a module. Fortunately, it's not a difficult task, but there are a few keys to successfully installing a video into your site. The video below illustrates how to embed a YouTube video into an article or module and the article that follows explains the same thing with screenshots. Within a few minutes you'll be watching the video on your site. We've broken down this article into the following steps:

Copying YouTube iframe Code

Turning off Text Filters

Embedding iframe Code into an Article

Copying YouTube iframe Code

First, go to YouTube and locate the video you'd like to embed in your site. Beneath of the video, locate the "Share" button and select it.

Once you select "Share", a URL will be displayed for you to share, but you'll want to locate and select the "Embed" button. This will give you the customized code that you can embed in your article or module.

After selecting the "Embed" button, the HTML iframe code will appear. Before copying the code to paste into your article or module, you can make a few selections to make about the size of the video you'd like to display, privacy settings, HD settings, etc. Be sure to make your selections before copying and pasting the code because the code will change based on your selections.

Back to Top

Turning off Text Filters

Once you've made your selections, you have two options. The first is to embed the code into an article, and the second is to embed the code into a Custom HTML module. Either way, there is one key default setting that you'll have to check before continuing. To check this setting and/or change it if needed, log into the Administration area (the back end) of your site, and click on "Global Configuration".

By default, Joomla 3 sets the Super User to "No Filtering", but you want to check and make sure it's set correctly. Inside the Global Configuration area, go to the "Text Filtering" tab, and scroll down to the the "Filter Type" setting for the Super Users. As the account holder, you are considered a Super User. Select "No Filtering" for the Super Users (if needed). By default, Joomla filters iframe code, and because YouTube videos use iframe code, Joomla will automatically delete the code unless you select "No Filtering" here. Don't forget to save your work.

Back to Top

Embedding iframe Code into an Article

Next, return to the Article Manager and select the "New" button to create a new article. If you are going to insert the video into a Custom HTML module, go to Extensions > Module Manager. Select the "New" button in the Module Manager, and select "Custom HTML" for the module type. Title the module, select a position for the module, and follow the steps below. The editor works exactly the same in the a module as it does in an article.

Create a title, and select the appropriate category, but then locate the Source Code icon in the JCE Editor. If you're not using the JCE Editor, there should be some type of option to view the HTML version within the editor you are using. If you're using the TinyMCE editor, set the editor to "None" in your site s Global Configuration or the code will be broken.

Next, paste the code into the HTML version of the editor.

If you select the Source Code icon again, you will return to the normal view of the editor. You'll notice a yellow box. This is the video. Just a note, if you are using JCE Editor and you have not configured it to allow iframes, you will not see the yellow box and you will not see the code you just pasted in your HTML version of the editor once you save, however, your video will still display and you can see the code you pasted only if you toggle the editor. Make sure you go to your JCE control panel and set it to allow iframes. You will then see the yellow box and the code. Be sure to save your work. You'll need to link your new article to a new menu item.

After you've linked the article to a menu item, return to the front end, hit refresh, and you will be able to view your video whether it is in an article or a module.

Back to Top