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.
Here is how I integrated in Umbraco:
- Extract the contents of the
youtube.ziparchive to your
- In your
/config/folder, open the
- Insert the following lines:
After the last `<command />` entry, add… <pre class="brush: xml; title: ; notranslate" title=""><command> <umbracoAlias>mceYoutube</umbracoAlias> <icon>../umbraco_client/tinymce/plugins/youtube/images/youtube.gif</icon> <tinyMceCommand value="" userInterface="true" frontendCommand="youtube">youtube</tinyMceCommand>
Then after the last `<plugin />` entry, add… <pre class="brush: xml; title: ; notranslate" title=""><plugin loadOnFrontend="false">youtube</plugin></pre>
- 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).
- The YouTube button is now available in Umbraco. However, it’s not quite ready yet, there is still one more step!
- 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).