« Select your internet provider with Get ISP.info! | Home | Find an international calling card at TheRichCom.com! »
How-to post YouTube videos in Wordpress
By Michael Lundberg | November 25, 2007
I know that I’m a total noob for not figuring this out sooner, but this little problem caused me enough grief that I decided to go ahead and create a post describing how I fixed the YouTube formating issues that I’ve encountered since I started using Wordpress. Now, I generally consider myself a fairly tech-savvy kind of guy, but for the longest time, I couldn’t figure this out for the life of me. Every time I attached a YouTube or any other Flash-based video to my Wordpress blog, I encountered extreme formatting errors. Maybe you’ve had the same problem?
The solution is very simple and embarrassingly simple. If you want to embed YouTube videos (or any other Flash-based video) to your Wordpress blog, follow these simple steps:
First, find a YouTube video. I’ll use this live Radiohead video of Bodysnatchers, from their latest album, In Rainbows. Note the embed link in the screenshot (click for a larger version):
Now that you’ve found your YouTube video, go into the Wordpress administration dashboard. Create a post, just as you normally would: select “Write” from the menu bar and “posts” from the sub-menu. The easiest thing would be to go ahead and write your blog article as planned. Just leave a spot in your article where you want to video to show up. In fact, I’ve found that it’s best if embedding your video is the last thing that you do before posting it.
Once you’re done writing your blog article, it’s time to insert your video. By default, you will have two tabs in the Wordpress administration screen, above the space where you write your blog article text. They are labeled “Visual” and “Code”. You’ll probably be writing your article text under the “Visual” tab. You can see them in the screenshot below (click for a larger version):
Now, select the “Code” tab. This will allow you to see all the raw HTML markup of your article. Pay no attention to the underlying code. You can disregard all of it. Without changing any of the existing text, find the spot in the code where you want to insert the YouTube video. For the purposes of demonstration, I’ll post my video at the end of the next paragraph. If you don’t still have the embedded link saved to your clipboard, grab it from YouTube again. Now, here’s the trick… and pay attention.
Using the mouse, select the “code” button from the submenu bar (click for a larger version):
Now, paste your YouTube link. When you paste it, make sure that you don’t put any extra spaces or carriage returns in the middle of the link. Any alterations to the link will affect your formating in unpredictable ways. Now that you’re done with that, select the same “code” button again. This time, it will read “/code”. Select it again immediately after the YouTube link you just pasted. It should look something like this when you’re done(click for a larger version):
That’s it! If you did it correctly, you should see your Radiohead YouTube video. I’ve posted mine below:
Did it work? Here’s are a couple of things to consider:
- I use a three column Wordpress theme. If I use any pictures in the middle column that are wider than the width of the middle column, it throws off the formating. If you follow these steps closely and you’re still seeing formating problems, make sure that none of your images exceed the width of column that it’s placed in.
- If it doesn’t work the first time, try it again. The key is to make sure that you’re not making any accidental changes to the embed link.
- This same process should work with any other Flash-based video that you want to embed (for example Vimeo or Revver, etc.).
- I use Wordpress version 2.2.2 (you can find your version number at the bottom of all administration screens). I’m almost positive that this will work for all Wordpress version 2.x.x installations, but your mileage may vary.
- I’ve noticed that if you edit the text of an article with an embedded video, even if you don’t modify your embedded video code, Wordpress may mangle the video. If that happens, just erase the old embedded video code and re-embed it. That should fix it.
- If none of this works for you, Mkyong wrote an alternate approach on his blog that you can find here. In fact, I used his how-to article and a comment to his article as a model for my how-to article. If Mkyong’s how-to helps you, give him a Digg.
Still having problems? Have a better way of doing it? Leave me a comment below!
If you liked this post, please consider subscribing to my RSS feed.
December 14th, 2007 at 2:03 pm
Excellent! Thank you for this.
December 15th, 2007 at 9:44 am
@ George - thanks for hitting my site. I hope my little how-to was useful.
Michael Lundberg
http://www.michaellundberg.com
December 21st, 2007 at 10:30 pm
[…] I just figured out how to embed flash movies without messing up the rest of my post, so check out the first five […]
January 24th, 2008 at 11:53 pm
Thanks, that worked!
February 25th, 2008 at 11:08 am
I just wanted to express my gratitude for your post, I’ve been banging my head for the past 2 hours trying to embed a YouTube video and have the blog basically fall apart thanks to Wordpress altering the code.
Your post solved my problem in 2 minutes.
Thanks!
Paul Hancox
P.S: Drop me an email if you ever want a free copy of my ebook “Small Changes: Big Profits” as a thank you. (The book is at smallchangesbigprofits.com). I mean it.
February 25th, 2008 at 11:22 pm
@ Paul - Thanks for the feedback! I struggled with this for a while myself before I figured it out.
Michael Lundberg
http://www.michaellundberg.com
February 29th, 2008 at 12:44 am
i think the guide is a little bit incorrect. The real trick here is that the tag and the tag should be in one line.
e.g.
otherwise, it wont work.
March 2nd, 2008 at 8:53 am
Thank you so, so much for this post. I have blogged in Blogger, Typepad and even Slashcode and am pretty good with HTML, but I could not figure this out at all. I am building a site right now that I had hoped to base around embedded materials, like YouTube and Docstoc or Scribd. Yet every time I would publish my documents, the 3 column set up would go crazy. I even have the Word Press for Dummies book which has helped me figure out how to manipulate the look and feel of my site but had nothing about embedding YouTube and other materials. The secret really is that “code” button and for some reason, when you edit a site, the tag gets moved to the front of the post. Thank you so much for the detailed explanation.
March 2nd, 2008 at 11:08 pm
@ Carolyn - thanks for the comments! I’m glad this little how-to was helpful!
Michael Lundberg
http://www.michaellundberg.com
March 6th, 2008 at 9:53 pm
@ Juaquin Bordado - You may be correct. All I know is that when I try to post embedded flash into Wordpress bad things happen, unless I follow the above process, step by step. Your mileage may vary.
Michael Lundberg
http://www.michaellundberg.com
March 11th, 2008 at 6:11 pm
this was AMAZINGLY helpful. I just switched from a free wp blog to a hosted one and nothing has made sense anymore. This post picked up where the ambiguity of the forum stuff left off. THANKS so much. I wish you had more like this on your site.
March 12th, 2008 at 8:28 pm
Hi Michael,
Like a few of your readers, I have been messing with this for at least a couple of hours, consulted all the usual sources, including the Dummies book — then I found your site. I got the two YouTube videos to Preview twice and then published. No dice. I’m getting broken links. I went back in, deleted, put it back in and still - broken. What’s a poor guy to do? I would appreciate your feedback.
Thanks,
Michael
March 12th, 2008 at 8:44 pm
Sorry to post again — I kept trying your method of replacing the video code and it is up. Once it is up, is it stable? Do I have to worry about it? Can you tell I’m new to this stuff? Thanks for posting the information.
Thanks again,
Michael
March 12th, 2008 at 9:29 pm
@Michael Salas - Once your videos are up, they should stay stable, but if you edit anything with your post, Wordpress might jumble up your post again. I’ve found that if I edit even the categories (without even touching the text itself), the posted video will be scrambled and I have to delete the YouTube reference (or whatever flash you’ve embedded) and cut-n-paste it again from scratch. As long as you don’t save any new changes to your posts, you should be fine.
Does that count as “stable”?
Good luck and thanks for the post!
Michael Lundberg
http://www.michaellundberg.com
March 29th, 2008 at 3:32 am
Thank you so much! I was doing the right thing, but WP kept changing it! Now I know to publish straight away after embedding. It works!
April 10th, 2008 at 9:28 am
Very useful hints. Thanks a lot
April 14th, 2008 at 12:23 pm
The tip makes sense but I can’t make it work. Whenever I hit Save or Publish the code changes and the video is blank. I’ve tried reinputting the code 10 times but the same thing happens each time. I can’t figure out how to prevent the code from changing. I also tried disabling the Visual editor but the code still didn’t work. Perhaps the embedding code from You Tube is incorrect.
April 14th, 2008 at 10:44 pm
Bummer, I was hoping this would finally put an end to me not being able to embed YouTube videos but I’m still running into the same problem.
For me though, it’s IE that messes it all up. When I embed the code, everything works fine when using Firefox but if I go to ie, my site won’t even open if I have a YouTube code embedded in the site and I don’t know why this is happening.
Oh well, the article was well-written though and easy to follow
May 5th, 2008 at 8:41 pm
@ Kym - IE is always a pain… I just checked out your site and it looks like you got (at least) one YouTube video up (http://tinyurl.com/3ub2dl), but then again, I’m using Firefox. Heh, heh.
Thanks,
Michael Lundberg
http://www.michaellundberg.com
May 5th, 2008 at 8:47 pm
Thanks Michael,
I forgot I posted this LOL I actually figured it out, well my web designer did, you have to remove all that stuff BEFORE the part of the code. Once I did that, evertythign else worked! In IE *and* Firefox!
Hope that helps some other people
May 5th, 2008 at 8:51 pm
@Kym: I’m glad you got it working in both browsers. Wouldn’t it be easier if everyone just used Firefox?
Thanks,
Michael Lundberg
http://www.michaellundberg.com
May 5th, 2008 at 8:54 pm
@Hanlie: I think that’s the key. Don’t even go into the editor after you’ve posted an article with embedded flash. Just know that the WP engine attempts to modify the embedded code, which will ruin the post.
Thanks,
Michael Lundberg
http://www.michaellundberg.com
May 5th, 2008 at 9:00 pm
@Michael - yes it would, what is the world waiting on? lmfao