How to Embed YouTube Videos in WordPress: 16 Almost-Easy Steps
My last post included 2 YouTube videos. I created the post using Live Writer and Wordpress.
Since it was a nightmare, and…
since I spent an extra hour on the post, figuring out how to do it, and…
since ShandyKing’s post (which comes up first on when you Google “wordpress embed youtube videos”) doesn’t solve the problem, at least for me, and…
since I love Wordpress, and…
since I love my fellow bloggers and want them all to succeed…
… I’m going to tell how I did it.
- Create the post you want, absent the videos. If you are using a posting tools other than WordPress itself, do all you want in that tool and then send it to WP as a draft.
- In WP’s post editing page, click “Save and Continue Editing”
- Click “Preview”
- On the preview, make a note of exactly what words you put last in your post.
- With the preview window open, get the page source.- In FireFox, that’s ctl-U (or alt-V, O).
- IE7 it’s alt-V,C.
- In Opera it’s ctl-F3.
- In anything else you’re on your own. - Paste the entire page source into a text editor (Notepad or something better), unless your browser already put it into an editor for you. (Opera has its very own editor, how cool is that?)
- Go to YouTube and get the source code to embed the video.
- In the editor, paste the code exactly where you want the video to be. (I always put it between a <p> </p> pair, having intentionally left a blank line in my post to insert it in.)
- Now, (still in the text editor, NOT in WordPress) select all the code from
- just after <div class=”entrytext”> to
- after the last closing tag that encloses the last words
of your post. (Sorry that’s vague, but for example, if your
last words were part of a link, the “last closing tag” may
be </a>, while if you ended with plain text, the last closing
tag is probably </p>.) - Copy this text.
- Go back to the edit-post window in WordPress. Switch from Visual to Code.
- Select everything in the editing window. Delete it and paste the code you copied from the editor.
- Click Save and Continue Editing.
- If it looks right, go on to the next step. If it doesn’t look right, you have something to figure out that I can’t help you with. But my 1st guess would be that you copied too much or too little code from the text editor. 2nd guess: you didn’t get the WP edit window completely empty before pasting.
- Back in the WP edit window, again select and delete everything. Again paste (your paste buffer should still contain the correct code, right?)
- Now Publish.
The key was making sure you re-paste the code into the edit window immediately before publishing. Because when you previewed, WP made a hash of the code, and what it put there must be eliminated.
I didn’t say it was easy, right? You have to be comfortable enough with HTML tags to know just how much code to copy from the text editor. But with that caveat, it’s really not all that hard. And it works, at least for me. Whereas WP messes it up pretty much every time I try to do it differently.
WordPress is updating fairly often. I imagine WP will have this problem figured out in another version or 2 or 3. Meantime, this is what works for me.
BTW, I’m using WP 2.3.1. My browser is FireFox 2.0.0.11, running on Windows Vista
del.icio.us Tags: WordPress,YouTube,embed,videos,how
.