How to Embed a Video From YouTube into Joomla 3.0 Articles

by Elaine on January 21, 2013

Joomla 3.0 Tutorial on How to Embed a Video from YouTube in Joomla 3.0

This is a very simple tutorial on how to embed a video from YouTube into Joomla 3.0 Articles.  By default Joomla 3.0 does not allow certain types of codes to be added into your Joomla Articles and this is for security reasons.  So you must manually remove this restriction because to embed YouTube videos you need to be able to put <iframe> code into the HTML portion of your article.  You can change that in the Plugin Manager TinyMCE editor features.  To enable your editor –TinyMCE to allow iFrame code you must remove it from the ‘Prohibited Elements’ in the Plugin Manager.   Below I will show you how to easily do that.

How to add iFrame code to your Articles in Joomla 3.0 Overview:

  1. Grab Code from Youtube
  2. Remove <iFrame> from Prohibited Elements
  3. Create Article and Paste into Article HTML
  4. Paste <iframe> code into HTML in Joomla Article
  5. See Youtube Video Embedded into Article
  6. View Article from Joomla 3.0 Frontend

Steps:

1.  Grab Code from Youtube

Find your favourite Youtube video and you want to share it on your Joomla 3.0 website?  It’s easy to copy and paste the code into your Article HTML.

joomla 3 tutorial embed youtube video into article iframe code How to Embed a Video From YouTube into Joomla 3.0 Articles Joomla 3.0 – Copy Youtube embed code
  • Go to Youtube and find the video you want to embed
  • Click on ‘Share’
  • Click on ‘Embed’
  • Copy the code in the box from – <iframe> to </iframe>

2.  Remove <iFrame> from Prohibited Elements

I’ve created a separate tutorial on how to allow <iframe> code into Joomla Articles and it’s here.  After you complete those steps, proceed to step 3 below.

  • Click here to follow the steps to allow <iframe> in Joomla Article HTML

3.  Create Article and Paste into Article HTML

Login to your Joomla 3.0 website now and create your article.  If you have an existing article you can also edit it to paste the code you copied from above into the Article HTML.

joomla 3 tutorial embed youtube video into article iframe code edit article html 2 How to Embed a Video From YouTube into Joomla 3.0 Articles Joomla 3.0 – Created Article and Click on HTML
  • Login to your Joomla 3.0 Administrator backend
  • Click on ‘Content’
  • Click  on ‘Article Manager’, ‘Add New Article’
  • Enter in the following information.  Below is just an example of article I created and youtube video code that I copied.
    • Title = Embedding a Youtube Video
    • Category = Joomla
    • Body = This is Elaine from Cmsmind.com embedding a youtube video about the Apple Mini
  • Click on HTML to paste the Youtube Video embed code

4.  Paste <iframe> code into HTML in Joomla Article

Paste the <iframe> code you copied from step 1 from Youtube.com

joomla 3 tutorial embed youtube video into article iframe paste code 3 How to Embed a Video From YouTube into Joomla 3.0 Articles Joomla 3.0 Tutorial – Paste youtube embed iframe code into joomla article
  • Position cursor where you want to paste the <iframe> code
  • Paste <iframe> code into the ‘HTML Source Editor’
  • Click on ‘Insert

5.  See Youtube Video Embedded into Article

Now you will see the YouTube Video embedded into the Article.  If you don’t and you still see the <iframe> code stripped, make sure you follow the directions in the tutorial.  Make sure you only in the TinyMCE Plugin Manager – Step 3, in the Prohibited Elements – you only remove the word – iframe.  Leave the rest as is.  Click here for a link to the tutorial on how to remove <iframe> from prohibited elements.

joomla 3 tutorial embed youtube video into article 4 How to Embed a Video From YouTube into Joomla 3.0 Articles Joomla 3.0 Youtube Video Successfully embedded into Joomla Article
  • Click on ‘Save & Close’

6.  View Article from Joomla 3.0 Frontend

You can refresh your website now and view the article you created from the frontend.  The Youtube video will be displayed in the article.  You can see my screenshot below of the Article I created above about the Apple Mini.

joomla 3 tutorial embed youtube video into article frontend 5 How to Embed a Video From YouTube into Joomla 3.0 Articles Joomla 3.0 Embed Youtube Video in Joomla Article

I hope that helps you.  Please leave a comment if you have any questions.

Thanks,

Elaine

 How to Embed a Video From YouTube into Joomla 3.0 Articles

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: