Add YouTube Plug-in to Umbraco/TinyMCE

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:

Extract the contents of the youtube.zip archive to your /umbraco_client/tinymce/plugins/youtube/
In your /config/ folder, open the tinyMceConfig.config file.
Insert the following lines:
After the last <command /> entry, add…
```
	mceYoutube
	../umbraco_client/tinymce/plugins/youtube/images/youtube.gif
	youtube
75
```
Then after the last <plugin /> entry, add…
```
youtube
```
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).

13 thoughts on “Add YouTube Plug-in to Umbraco/TinyMCE”

Exactly what I need for an upcoming project. And now I don’t longer have to research myself. Thanks!

Cheers,
/Dirk

You’re welcome Dirk, glad it helped!

Lee, this is fantastic. Nice job packing this up into an easy to follow guide!

cheers,
doug.

Hmm, been fiddling around with this, goes totally nuts on Warren’s CWS2 site? Altho he uses a copy of the standard RTE, it does no longer display that one on all documents? Have you tried it on a clean install? Or CWS2?

/Dirk

Thanks for sharing! Really useful!

Hi Dirk,

I’ve actually only tried it out on v3.0.6 (I haven’t upgraded my client’s site to v4 yet).

Not sure what the problem might be, surely the process should be the same on v4? When I get chance, I’ll take a look at it on CWS2.

Let me know if you figure out what the problem is, I’ll update my blog post.

- Lee

Great walkthrough Lee! Out of interest before I try it, how does it embed the flash movie in the page? Does it require something like swfObject or does it us plain HTML?

Hi Simon, it uses straight-forward <object> tags – the same HTML as YouTube give you -so it should work the same way.

Here’s an example that we use on FLSM, (feel free to view-source): http://www.freelancesupermarket.com/video-tutorials/site-tutorials.aspx

- Lee

This looks great! Thanks for the info.

Lee,

Just tried this in v4012 and I can see the youtube icon in the rich text editor data type and have checked the checkbox, however when in rich text edit field i dont see the youtube icon. Permissions etc are correct also i copied files to both tinymce and tinymce3 folder in the config i am pointing to tinymce3.

Any ideas?

Cheers

Ismail

Ismail,

Thanks for bringing this to my attention, I had only tested this on Umbraco v3 (TinyMCE v2) – as that it what my client is currently using. I hadn’t tested it on Umbraco v4 (TinyMCE v3) – it was on my “to do” list.

Tested out this morning, I got the same problem, no YouTube button in TinyMCE … after some searching, it seems that this YouTube plug-in isn’t compatible with TinyMCE v3 (it only works with v2). *bummer*

I did find a quick workaround – without the need for extra plug-ins. In the Richtext editor data-type, tick the Flash/media icon. This allows you to embed any type of Flash movie (swf) in TinyMCE.

The main downside is that you need to figure out the URL of the actual YouTube movie (swf); which is usually in the format of:

http://www.youtube.com/v/{YouTube Video Id}

Not too difficult, but not as straight-forward as pasting in a YouTube URL.

Hope this helps? (I’ll update my blog post accordingly).

Cheers,
- Lee

Lee,

Thanks for this, I am using http://our.umbraco.org/projects/designit-video-embed as a document property for a page that has fixed design. However I found that i needed a way for another part of the site to be able to add youtube video directly i’ll give your flash suggestion a whirl. Also if you have not already done so it might be worth making a request on sourceforge to the original creator of the plugin to do a v3 version.

Regards

Ismail

Cheers Ismail. Several people have already asked about TinyMCE v3 support, but my feeling is the developer has abandoned the plug-in.

The DesignIt Video Embed package looks great, love the ability to preview video clips.

Dirk on July 16, 2009 at 16:03 said:

Exactly what I need for an upcoming project. And now I don’t longer have to research myself. Thanks!

Cheers,
/Dirk
Lee Kelleher on July 16, 2009 at 16:08 said:

You’re welcome Dirk, glad it helped!
Douglas Robar on July 16, 2009 at 16:28 said:

Lee, this is fantastic. Nice job packing this up into an easy to follow guide!

cheers,
doug.
Dirk on July 16, 2009 at 19:13 said:

Hmm, been fiddling around with this, goes totally nuts on Warren’s CWS2 site? Altho he uses a copy of the standard RTE, it does no longer display that one on all documents? Have you tried it on a clean install? Or CWS2?

/Dirk
Kenneth Solberg on July 16, 2009 at 20:36 said:

Thanks for sharing! Really useful!
Lee Kelleher on July 16, 2009 at 20:46 said:

Hi Dirk,

I’ve actually only tried it out on v3.0.6 (I haven’t upgraded my client’s site to v4 yet).

Not sure what the problem might be, surely the process should be the same on v4? When I get chance, I’ll take a look at it on CWS2.

Let me know if you figure out what the problem is, I’ll update my blog post.

- Lee
Simon Dingley on July 16, 2009 at 21:06 said:

Great walkthrough Lee! Out of interest before I try it, how does it embed the flash movie in the page? Does it require something like swfObject or does it us plain HTML?
Lee Kelleher on July 16, 2009 at 22:09 said:

Hi Simon, it uses straight-forward <object> tags – the same HTML as YouTube give you -so it should work the same way.

Here’s an example that we use on FLSM, (feel free to view-source): http://www.freelancesupermarket.com/video-tutorials/site-tutorials.aspx

- Lee
Bij on July 17, 2009 at 08:31 said:

This looks great! Thanks for the info.
Ismail Mayat on July 24, 2009 at 08:42 said:

Lee,

Just tried this in v4012 and I can see the youtube icon in the rich text editor data type and have checked the checkbox, however when in rich text edit field i dont see the youtube icon. Permissions etc are correct also i copied files to both tinymce and tinymce3 folder in the config i am pointing to tinymce3.

Any ideas?

Cheers

Ismail
Lee Kelleher on July 24, 2009 at 10:07 said:

Ismail,

Thanks for bringing this to my attention, I had only tested this on Umbraco v3 (TinyMCE v2) – as that it what my client is currently using. I hadn’t tested it on Umbraco v4 (TinyMCE v3) – it was on my “to do” list.

Tested out this morning, I got the same problem, no YouTube button in TinyMCE … after some searching, it seems that this YouTube plug-in isn’t compatible with TinyMCE v3 (it only works with v2). *bummer*

I did find a quick workaround – without the need for extra plug-ins. In the Richtext editor data-type, tick the Flash/media icon. This allows you to embed any type of Flash movie (swf) in TinyMCE.

The main downside is that you need to figure out the URL of the actual YouTube movie (swf); which is usually in the format of:

http://www.youtube.com/v/{YouTube Video Id}

Not too difficult, but not as straight-forward as pasting in a YouTube URL.

Hope this helps? (I’ll update my blog post accordingly).

Cheers,
- Lee
Ismail Mayat on July 24, 2009 at 10:21 said:

Lee,

Thanks for this, I am using http://our.umbraco.org/projects/designit-video-embed as a document property for a page that has fixed design. However I found that i needed a way for another part of the site to be able to add youtube video directly i’ll give your flash suggestion a whirl. Also if you have not already done so it might be worth making a request on sourceforge to the original creator of the plugin to do a v3 version.

Regards

Ismail
Lee Kelleher on July 24, 2009 at 10:29 said:

Cheers Ismail. Several people have already asked about TinyMCE v3 support, but my feeling is the developer has abandoned the plug-in.

The DesignIt Video Embed package looks great, love the ability to preview video clips.