Loading...
Joomla 3.0Joomla Tutorials

How to Embed a Video From YouTube into Joomla 3.0 Articles

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.0 - Copy Youtube embed code
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.0 - Created Article and Click on HTML
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.0 Tutorial - Paste youtube embed iframe code into joomla article
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.0 Youtube Video Successfully embedded into Joomla Article
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.0 Embed Youtube Video in Joomla Article
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

Leave a Reply

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

Captcha Captcha Reload