Embed YouTube using the WP2 WYSIWYG Editor
Posted by The Technocrat | Filed under Coding, Geeky
Training TinyMCE
Now that I have a hackable editor that isn’t a primary part of WordPress, I can tell it to stop stripping my <video> tags. My installation of tinyMCE has two lines in its main javascript file, tiny_mce.js:
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]“);
this._def(“extended_valid_elements”,”");
Yeah, that first one’s a doozie. But take a look at it a sec. Valid Elements! This is a complete list of every tag and its allowed modifiers.
Check out the first one. Hey, that’s <a>. and it has ‘href’ listed as an allowed modifier. That means it’s allowing <a xhref=”xxxx” mce_href=”xxxx”></a>! This is the line that tells my suppimental installation of tinyMCE what tags are allowed to proceed from the WYSIWYG editor into the actual post!
This first line is pretty crazy though, I mean look at it. That’s, like, the full XHTML spec for tinyMCE. I don’t want to mess with that one. Apparently, tinyMCE doesn’t want me to monkey with it either, because they’ve made a nice line called ‘extended_valid_elements’ for me to put all the crap they don’t want to be associated with. Since the only thing being stripped from my cool YouTube code are simple <video> tags, I’ll add it here, and tell my installation of tinyMCE to leave them be!
this._def(“extended_valid_elements”,”video”);
note: I spent about an hour to an hour-and-a-half messing with this line in the wrong installation of tinyMCE. Don’t make the changes in the default install of tinyMCE that comes with WordPress! You’re not using that installation! You won’t see the changes! Even if you could, they would be overwritten when the next version of tinyMCE comes with a WordPress upgrade, so don’t do it!
Success!
Now, open up a new post. Mmm, pretty editor. click ‘html’. (you have to enter the code this way, otherwise the editor will correctly be assuming you don’t want it rendered in the page). enter the following code: <video>[youtube permalink]</video>. Close the html editor, going back to tinyMCE. You should just see the permalink here, since the <video> tags are, well, tags.
Save the post, and check it out!
An embedded YouTube video, all done via WYSIWYG with one simple tag:
http://www.youtube.com/v/hBi89-STzsU
(the above video is from this code, entered in the html editor: <video>http://www.youtube.com/v/hBi89-STzsU</video>)
Next step
Now all I need to do is copy the ‘link’ button, but modify it so that instead of taking an URL and adding <a xhref=” + URL + “> + TEXT + </a> to the inputs, it will take my YouTube input and add the <video> tags to either end.
In addition, if I’m not completely sick of dealing with this, I might go back and see which tags of the YouTube-supplied code are being cut, and just add those tags to my exception list, however…
there is a plugin out there that plays multiple types of video (YouTube, Google Video) with a single tag. It’s called ExtremeVideo, and it uses a [gv] tag. You’ll notice those are brackets, and not angle brackets, so I’m not sure if tinyMCE’s exception list will recognize it as being ok, if I tell it to ignore ‘gv’.
I’ll post back if I get it working, because ideally, I do want a single tag I can enter in the editor that will play any video file. I just started with WPvideo because it was easy, and it works.
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