Embed YouTube using the WP2 WYSIWYG Editor
Posted by The Technocrat | Filed under Coding, Geeky
This topic became my white whale today. This has been a problem with WordPress 2.0, and the cause of many, many forum posts.
I sat down, told myself that I wouldn’t get up until I could embed a YouTube video in WP2 with the WYSIWYG Editor turned on, and ended up not getting up for the next three hours.
In the end, the solution was simple. I just shouldn’t have drank so much Water Joe.
Author’s Note: This post describes how to hack WordPress into letting you post video code while the WYSIWYG editor is turned on. I wrote this on April 26, 2006. Since then, there have been many attempts to make an easy-to-use plugin, but I haven’t been impressed.
Until today. (August 21, 2006) Check out Video Quicktags. It’s a great WYSIWYG-editor plugin for doing video, and I highly recommend it over the following method. Both work, but the plugin is easier.
Of course, if you want to keep reading and watch me struggle to develop the method that has allowed for WYSIWYG video usage for the last 4 months, feel free to keep reading…
Beginnings
The search for a good plugin that does this without fail ended in frustration. All of the plugins I could find, and all the tutorials and help in the forums always said somewhere to add xxx code there and yyy code here, and be sure to disable the wysiwyg editor, otherwise it will strip outthe special tags that each plugin used to embed the video.
Snap
<rant> Well I don’t want to disable it! It’s there for a reason! I’m lazy! Ther, you happy? I said it. I’m lazy. I want to click the little buttons and answer the little questions. I want to make the javascript think for me. I want to be stupid! Let me be stupid! Me love buttons!</rant>
Sorry ’bout that.
Making things simple
Ok, so I had a plan, but I needed the simplest dang way of embedding the video. I wanted one tag to work with, and let some plugin worry about taking whatever was in-between my <supertags> and make the video happen. For now, I wanted to pretend WP2′s TinyMCE-based WYSIWYG Editor wasn’t going to punch my tag in the neck as soon as I clicked save. So I went and did that.
There are maybe a few dozen plugins out there that help embed video. I found one called WPvideo that would let me take a YouTube permalink (like this: http://www.youtube.com/watch?v=whGVaLoIvkw) and let me put a <video> tag around it. Then it did all the work of embedding it in a flash player. Best plugin out there? I’m not saying that. Just got the job done, for now.
TinyMCE, we need to have a talk
Now, I know your friend WordPress 2.0, and she’s really nice. She’s letting me enter my nice code (<video>http://www.youtube.com/watch?v=whGVaLoIvkw</video>), and is waiting with my nice plugin for this code. But youkeep taking out my <video> tags. Not cool. I’m afraid we’re going to have to find a replacement for you. But you’re so irresistable!
OK, so anyway, I don’t want to modify the version of TinyMCE that comes with WordPress, because my changes will get destroyed when I update my WP install. But on the other hand, I’m a huge fan of TinyMCE and its plugin support. So I set out to find another wordpress plugin that would allow me to use my own installation of TinyMCE that I could hack to pieces and not worry about my changes getting overwritten.
My new friend
Introducing EditorMonkey. Not only does it have the TinyMCE interface I’m looking for, it also has an expanded feature set that includes a lot of optional TinyMCE features that don’t come with WordPress. A few of my favorite additions are spell check, full screen editing and multiple-page support, but there are many others. It’s TinyMCE gone crazy, basically.
Unfortunately, this version of TinyMCE is just like the one that comes with WP when it comes to stripping tags. Except this one will do what I tell her.
(by the way, not that I want to, but this plugin supposedly also will let you switch over to FCKeditor. I couldn’t get it to work, but I don’t care.)
In addition, this plugin needs some additions to your theme’s css to make the pretty frame. Just follow the installation instructions.
Pages: 1 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna.
April 27, 2006 at 3:46 am
Very nice site, I was an avid reader of your blog before.
April 27, 2006 at 8:06 am
Hey thanks!
April 27, 2006 at 12:34 pm
It took me a few attempts to get youtube working on wordpress…so I just went for a youtube plugin on plaintext and use deepest sender firefox extension if I want to compose picture posts
April 27, 2006 at 1:43 pm
neat. Everyone has their own preferences, if it works, cheers.
April 28, 2006 at 4:46 am
If I remember correct, a “media” plugin is on the current todo list for TinyMCE and hopefully should end up on a release in either end of May or sometime in June, hope this solves your problems.
April 28, 2006 at 8:47 am
Cool! Thanks for the update, but I’m unable to find any record of such a plugin. I know there are a few out there that automate the code-entering process of embedding video, but the problem is that none of these plugins add the embedding code to the exception list.
The result is that all of the plugins I sawe make it very easy to enter video using the wysiwyg editor, but the tags get stripped out when you save. What we need is a way for the plugin to hook into extended_valid_elements. Of course, this enables bad people to write plugins that allow for arbitrary code to be executed also.
Maybe this new plugin will hook extended_valid_elements, and the tinyMCE will require validation before adding anything to extended_valid_elements?
April 29, 2006 at 6:48 am
[...] Selbst WordPress kann mit dem Code umgehen, danke Geeklimit.com für die Klasse Erklärung. Powered by WPvideo 0.60 [...]
May 1, 2006 at 1:31 pm
There is already a hook into MCE in WordPress.
Make a normal WordPress plugin with a function that uses the “mce_options” action hook. This function needs to do this:
echo ‘extended_valid_elements : “insertYourElementsHere”,’;
That’s pretty much all there is to it.
BTW, the main thing that seems to be preventing you from inserting the normal YouTube stuff is the fact that it has an embed tag. Adding that to the elements array might prove helpful.
May 6, 2006 at 6:58 pm
Can’t seem to get this to work. I assume I should be working with ‘tiny_mce.js’ in the wp-content/plugins/editormonkey/tinymce folder?
May 6, 2006 at 10:21 pm
Make sure Editor Monkey is turned on. Options > EditorMonkey in the WP-Admin backend. (Must be logged in as admin)
also, in wp-content/plugins/editormonkey/tinymce/tiny_mce.js, the there are three element definitions right near the top – search for ‘extended_valid_elements’ (no quotes). It will be empty. Make it look like this:
(the xhtml spec, leave this alone)
this._def(“valid_elements”,”+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|style],-ul[class|style],-li[class|style],br,img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align],-sub[style|class],-sup[style|class],-blockquote[dir|style],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],-td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[style|class|align],-pre[class|align|style],address[class|align|style],-h1[id|style|dir|class|align],-h2[id|style|dir|class|align],-h3[id|style|dir|class|align],-h4[id|style|dir|class|align],-h5[id|style|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],-font[face|size|style|id|class|dir|color],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang]“);
(custom spec – put the tags to be ignored here)
this._def(“extended_valid_elements”,“video”);
(invalid elements spec, leave this alone)
this._def(“invalid_elements”,”");
Of course, double-check that you have WP-Video installed and active…it’s the one that makes the
Any other problems, post back
May 7, 2006 at 5:48 pm
Thanks for the quick reply – I really want to get this feature working. I didn’t have Wp-Video installed (Ooops). Now that it is installed and active as well as EditorMonkey, this is what happens. I put: http://www.youtube.com/v/ND0xNuCKgKA into my html window, hit update and it turns into: http://www.youtube.com/v/ND0xNuCKgKA
‘Powered by WPvideo 0.60′ does show up as an active link on the post, but the url is displayed in text and there is no video box.
I appreciate your help – this is a great feature I’ve wanted for a while.
May 7, 2006 at 5:52 pm
Ok let’s try that again! I put ”www.youtube.com/v/ND0xNuCKgKA” (without the single quotes) into my HTML window, hit update and it turns into: ””www.youtube.com/v/ND0xNuCKgKA (without the single quotes).
May 7, 2006 at 5:59 pm
For the love of God . . . the video tags (this editor keeps striping them out) start on either side of the youtube url then end up together in front of my youtube url after I hit update in the html editor window.
May 8, 2006 at 8:30 am
that’s odd. you’re on wp2, right?
May 10, 2006 at 10:56 am
Yes, I’m using wp2. Bizarre. Any other thoughts?
May 10, 2006 at 12:18 pm
no, I don’t have any other thoughts. You could try editing the standard wp TinyMCE js file, and try that one, but make a backup of the js file first (tinymce.jsOLD or something)
very strange, should be working.
May 17, 2006 at 2:52 pm
Thanks a ton, man. Helped me finally get the shizzle embedded like I wanted it to be.
May 17, 2006 at 3:34 pm
no prob!
May 20, 2006 at 12:38 am
I tried to add in embed and object into the extended_valid_elements list instead because these are the 2 tags used by youtube. It seems not to be working. Is there anything wrong with what I am doing?
May 20, 2006 at 1:37 am
EditorMonkey…
EditorMonkey is an GUI editor for wordpress. It has 2 GUI editors rolled into one. Though the FCKEditor cannot work, I think the TinyMCE is more than enough suited for my use.
I have installed this GUI editor a few weeks ago. And today I fin…
June 3, 2006 at 12:06 pm
Thanks for the sweet tips, I finally got my vid up! I just started my WP http://www.charlesrequina.com/blog/
Thanks for your help!
June 7, 2006 at 6:18 am
[...] About a day I have been searching on the net on how to embed youtube video into wordpress post. Many website I have come across only tell me to disable the visual rich editor but I dislike that method. I want to add it without disable visual rich editor. It is very hard to find it but at last I came across geeklimit site. [...]
June 23, 2006 at 3:56 am
This must have taken a while to suss man. Cheers
I do have a prob however.
Same as Tod
the video tags (this editor keeps striping them out) start on either side of the youtube URL then end up together in front of my youtube URL after I hit update in the HTML editor window.
Any ideas yet?
Cheers
June 24, 2006 at 7:34 pm
With new 1.01 version you can add videos using:
[video]link_to_video[/video]
This works on the visual rich editor…
June 25, 2006 at 7:52 am
woo!
looks like v1.01 is going to help quite a few people.
English page: http://www.skarcha.com/wp-plugins/wpvideo/#english
August 3, 2006 at 1:34 pm
[...] Embed YouTube using the WP2 WYSIWYG Editor | GeekLimit (tags: wordpress totry) [...]
August 21, 2006 at 11:30 am
I am TOTALLY new to WordPress, so this may well be a stupid beginner question, but I have been trying to get WPVideo version 1.0.2 to work for several hours now, and need to ask someone for help. I use the [video]youtube_url[/video] syntax in the rich editor, and what gets previewed and published is a link to the plug-in authors page (http://www.skarcha.com/wp-plugins/wpvideo/) with the video title and time displayed below it. But no working link to the video. What am I doing wrong? I copied the text into the style’s .CSS file, installed and activated the plug-in right, but no video. Appreciate any thoughts anyone can offer.
August 21, 2006 at 11:41 am
My apologies for not testing enough before asking for help. I just got a Google Video to work fine, so my problem is something particular to using YouTube videos. I copied and pasted the URLs for YouTube and Google identically, and one works and one doesn’t. Anybody have any ideas?
August 21, 2006 at 12:38 pm
Check this out, new method available!!
http://geeklimit.com/2006/08/21/new-wordpress-plugin-for-youtube-google-video/
December 12, 2006 at 1:56 pm
the wp2 “rich” text editor sucks.
even in the “HTML Source Editor”-mode nothing works.
January 16, 2007 at 9:28 am
look very nice , thanks to you
January 19, 2007 at 11:47 pm
Thanx a lot for the wpvideo plugin. It worked like a charm.
January 27, 2007 at 2:45 pm
Thanks for the update on Viper Quick tags .. very helpful and also thanks for sharing your difficult experience.. learnt a lot from it about wordpress and videos
November 5, 2008 at 9:55 pm
It’s fun. ATP Subscribe to the RCC perhaps
February 9, 2009 at 2:06 am
nice work .. i’ve been successful at embedding flash video, vimeo, even lightbox etc into my concrete5 based site vie the MCE editor, the only thing now is when i try and use the shadowbox plugin to put flash videos, the screen stays black. these are the same movies that worked just fine earlier .. can anyone offer any advice? thanks!
February 27, 2009 at 3:03 am
July 8, 2009 at 10:26 am
Hm that sounds good but I would like to know more details.
July 15, 2009 at 11:55 am
Your news is a cool stuff man, keep it going.
July 31, 2009 at 12:06 pm
That’s good man, keep it going.
August 6, 2009 at 5:30 pm
Good information to me.
September 25, 2009 at 11:38 am
XXX-Vip Video – бесплатное порно онлайн
January 6, 2010 at 1:45 pm
This is a very good stuff man. But you can be more specific next time. See ya !
March 19, 2010 at 3:36 pm
This is defenitely one of the key post on this blog. Keep it going man !
May 15, 2010 at 2:05 am
Hey, maybe this is a bit offf topic but in any case, I have been surfing about your blog and it looks really neat. impassioned about your writing. I am creating a new blog and hard-pressed to make it appear great, and supply excellent articles. I have discovered a lot on your site and I look forward to additional updates and will be back.
June 25, 2010 at 2:43 am
Great story and example
August 4, 2010 at 4:50 am
This is a very nice article, keep it going mate !
September 22, 2010 at 4:24 am
Well, the article is really the freshest on that notable topic. I agree with your conclusions and also can thirstily look forward to your approaching updates. Saying thanks will not simply be acceptable, for the huge clarity in your writing. I definitely will promptly grab your rss feed to stay privy of any updates. Pleasant work and much success in your business efforts!
January 16, 2011 at 6:29 am
Really nice work