How to Embed a YouTube Video in Joomla 3 Articles

How to Embed a YouTube Video in Joomla 3 Articles

Embedding a YouTube video in a Joomla article can be very easy. Even beginners can do it manually without using any additional extension or plugin. But there are indeed some configuration problems you have to deal with before performing a successful embedding.

By default, Joomla editor filters out iframe and some other HTML tags for the sake of website security. Besides, the whole Joomla system might also be configured to remove the HTML tags inserted by particular user groups. To resolve the issues, follow the instructions below.

Allow iframe in Your Text Editor

Taking TinyMCE editor as an example, you need to take the following steps to remove the restriction for iframe. Note: if you are not sure which editor is currently used, edit your profile and browse the Basic Settings.

Default Text Editor

Step 1. Go to Extensions > Plugin Manager and find the Editor – TinyMCE plugin in the list.

Editor - TinyMCE Plugin

Step 2. In the plugin settings, scroll down to Prohibited Elements. This line defines which HTML elements are not allowed and will be removed from the text automatically. The default value includes “script”, “applet” and “iframe”, so now you need to delete iframe from the text box, and then save changes.

Remove iframe from Prohibited Elements

Disable Text Filtering for Trusty User Groups

Joomla Global Configuration includes a special section for text filters. No matter which text editor you use on your site, the settings there take effect. You should make a change to the settings so as to allow certain users to embed videos with iframe.

To access the settings, you need to go to System > Global Configuration, and click on the tab saying “Text Filters”.

Global Configuration - Text Filters

Under the tab you can see all user groups available on your site and each of them has separate settings which you can customize as you want. As soon as you define the “Filter Type” as “No Filtering”, all users in the corresponding user group would have the freedom to use whatever code including iframe.

To minimize the vulnerabilities of your site while guaranteeing the convenience of inserting necessary code, you must restrict the allowance of no filtering to those who really need it. Less is better.

Configure Text Filters

Embed a YouTube Video in an Article

Firstly, you need to get the embedding code of the video. Under the video play-screen, click on “Share”, and then select “Embed”. Under the tab, there is a line of the embed code. Just copy the code.

YouTube Video Embed Code

Then, create a new article. In the text editor, click on the “source code” button, and insert the embed code wherever you want the video to display. Also, you can modify the value of width, height, frame border and full screen based on the design of your site.

Add Embed Code in Source Code

As TinyMCE is a WYSIWYG editor, after saving the code, you can see a video appear on the edit screen.

Embed YouTube Video

Saving the article and refreshing the frontend of your Joomla site, you will find that the video display in the article properly.

Display YouTube Video in Article