Lee Kelleher

Add YouTube Plug-in to Umbraco/TinyMCE

Posted on . Estimated read time: 3 minutes (427 words)

Update: Following on from Dirk and Ismail’s comments, I found out that this YouTube plug-in does not work with TinyMCE v3 (which is the default richtext editor in Umbraco v4). This guide is written to works  for Umbraco v3 only, (using TinyMCE v2).

If you are looking for similar functionality in Umbraco v4, (TinyMCE v3), then all you need to do is enable the ‘Flash/media’ button in your Richtext editor data-type and embed the YouTube video like any other Flash movie (swf) – more details in my comment below.

/End of update.

    • *Recently one of my clients wanted the ability to insert YouTube video clips directly into the TinyMCE editor within Umbraco.  My initial thought was to create a macro that would take a YouTube video URL, parse it and display it on the rendered (front-end) page.  

Tim G has a blog post on how to do this on his Nibble blog, (love the Surfin’ Bird reference).

This approached worked fine, but we ran into problems trying to edit the YouTube video URL, along with that, my client had an additional step of selecting a macro, then entering the YouTube URL.

After a little researching, I eventually found a native YouTube plug-in for TinyMCE, (direct link to ZIP download).

Here is how I integrated in Umbraco:

  1. Extract the contents of the youtube.zip archive to your /umbraco_client/tinymce/plugins/youtube/
  2. In your /config/ folder, open the tinyMceConfig.config file.
  3. Insert the following lines:
After the last `` entry, add… 
<command>
<umbracoAlias>mceYoutube</umbracoAlias>
<icon>../umbraco_client/tinymce/plugins/youtube/images/youtube.gif</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="youtube">youtube</tinyMceCommand>

<priority>75</priority> </command>

Then after the last `` entry, add…


<plugin loadOnFrontend="false">youtube</plugin>
  1. Once the XML config entries are in place, you will need to restart the  Umbraco application – the quickest way of doing this is by modifying your Web.config, (literally open it, add a space, remove it, hit save).
  2. The YouTube button is now available in Umbraco. However, it’s not quite ready yet, there is still one more step!
  3. In your Umbraco back-end, go to the “Developer” section, expand the “DataTypes” folder and then select “Richtext editor”. In the “Buttons” section you should see a YouTube icon. Check the box next to the icon, and you’re done! If you don’t see the YouTube icon, then check that the did the config steps above, and/or check that the read permissions are set correctly on your /umbraco_client/ folder, (re-apply them if needs be).