Embed Videos in WordPress the Right Way: Save Time, Increase Views, Be Awesome
[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]
***UPDATE***
I’ve released a sweet WordPress Plugin that’ll do a lot of this for you with some advanced features for RSS readers! Don’t miss it!
WordPress is one of those things in life where I find that the more I use it the more I fall more madly in love with it! It’s like a good wine and gets better with time!
Here’s a neat trick that you’ll want to establish early on not only in your WordPress Settings but also in your workflow: Auto Video Embeds! Officially this is called oEmbed as a technology.
Did you know that WordPress is so awesome that it can automatically take a video link from the major video providers and not only embed that video into your blog post but also adjust the size perfectly to fit your WordPress Theme and content area?
Yup!
First, we’ll walk through an example and then give you the goods:
4 Ways to Embed YouTube Videos in WordPress:
There are currently 4 (major) ways that you can embed YouTube videos into WordPress (#3 being the best way):
1. Copy, Paste, HTML Tab
This is the most painful way since it requires you to not only jump into the HTML Tab in your content area but opens you up to the possibility of really messing your post up if you copy and paste the wrong code.
Typically it would look something like this:
Who doesn't love Rick Astley?!?
You first find the video you want to embed and then you copy then embed code below the video:
Then you jump into your blog post editor, hit the HTML Tab on the right, and embed the code in:
There’s lots of room for error in this long process. And, you’d still have to customize the size a bit either on YouTube.com directly or in the editor!
Booooooooooooooooooooooooooo! No thank you!
2. Use ‘Insert Media’ Button
The second option you’ve got is to use the ‘Insert Media’ button in WordPress:
You may have to click the 'See More' button first.
Then you copy and paste the direct link into the open window and adjust your settings there:
If you click 'Constrain Proportions' you can size it to your content area properly.
This is a nice way of doing it but still requires some work. It is advantageous if you’re wanting to specify a certain size though for a given post.
Still not the most efficient.
3. Direct Link Using Media Settings for Size
This is the best and most efficient way of embedding YouTube clips into your blog.
First, you must go to Settings >> Media and save the right sizes for your blog:
My blog has a post width of 570 pixels, so I use that!
Now you’ve just told WordPress that you’re going to ask it to embed videos and make them span a certain width (in my case 570 pixels).
Now, all you have to do is grab the link to the video you want and it’ll auto-embed the video with the right sizes!
It would just look like this in your WordPress editor:
That's what we call 'EASY MODE'!
Pretty darn sweet, right?
Why would you do it any other way? By not using a plugin (see below) you also make your blog faster and less bloated. Faster load is a better user experience. That’s a good thing!
4. Use a Plugin
I have to include this just because it definitely is another option out there: You can use one of the many WordPress Plugins to “help” you embed your videos.
But why? Why bloat your WordPress blog down with another plugin when you can have most of what you need in WordPress directly? That has always baffled me..
Don’t bloat your installation and blog for your sake and your visitors!
More Than Just YouTube!
Did you know that WordPress has built-in many of the other major video platforms so you can do the exact same thing in option #3 with them? YouTube can do this for the following platforms:
- YouTube
- Vimeo
- DailyMotion
- blip.tv
- Flickr (both videos and images)
- Viddler
- Hulu
- Qik
- Revision3
- Scribd
- Photobucket
- PollDaddy
- Google Video
- WordPress.tv (only VideoPress-type videos for the time being)
- SmugMug (WordPress 3.0+)
- FunnyOrDie.com (WordPress 3.0+)
Wow..!
I think I might have just saved some of you lots of time.
Like you, I wish someone had showed me this years ago when I first saw it work!
Yikes!
Increase Video Views by Using This Technique!
As the title suggests there are a few reasons why this option is one of the best options so as to increase views of your videos and here’s why:
1. Fall-back Link: If, for some reason, the embedded video doesn’t come up it’ll automatically show the direct link to the video so that you can still have that visitor watch your video. Don’t let broken scripts on their browser stop them from watching your video!
2. Mobile Versions: WordPress embeds the mobile-ready versions of the platforms so that your visitors can watch them on your mobile device! For example, I was concerned that it wouldn’t embed the mobile-version of my Vimeo videos but it does! Check out the screenshot from my iPad – as you can see it’s playing! Of course, having the mobile-ready versions will increase views as well.
I love my iPad. Do you have one?
So I hope you can adjust your Media Settings and take advantage of the awesome video embed options that WordPress has built-in.
What have you been doing historically? Is this going to make it more easy for you?
Enjoy!
[This post is part of the Ultimate Guide to Launching a WordPress-Powered Blog series.]
I must say that you did save me a lot of time indeed
thanks a lot and keep up the good series
sure thing geeee!
Thank. You.
sure. thing. dude.
So this was 193% helpful!
whoa! tha’ts……. big!
Awesome! I’ve been using a plugin that does pretty much the same thing but knowing that it’s built in to WordPress means I can get rid of that. Thanks John!
which plugin!
Love it! Thanks!
sure thing jon!
John,
Great post! I was going the “long” way to embed videos. I followed the steps exactly, and when I looked at the post, the video did not embed. It just showed the link, as text.
Thoughts on what I’m doing wrong?
did you click the button to for “auto embeds”?
Yelp. I did it just like you showed. I also tried it on “visual” and on “html” – still just show the link when you try to publish it…
Brilliant! I haven’t messed with the WP embed options in a long time. I’ve been using the iframe for Youtube and Vimeo posts for a while, but fortunately I know enough to not break my entire post when I use the html editor.
Question though. Does the Vimeo embed link provide the non-Flash mobile-friendly version for all Vimeo videos, or just those published by Vimeo Plus users? Unless I’m mistaken, doesn’t Vimeo disable mobile views on standard accounts?
that’s a good point. i’m not sure. i’ll have to check on that.
Nevermind..works like a champ.
see below!
I’ve been grabbing the embed code and pasting it into the HTML tab. This is quicker. Thanks!
me too. this post was an “oooOOoooh” moment for me.
haha.
Another great tip! Changed my setting, and that is going to make me much more time efficient.
.
I have an iPad and love it. I currently use it for notes (Evernote), Mind-Mapping, and Quick Web Browsing. My wife loves using it for all the games
sweet!
Awesome sauce. Now that is a nice tip to have! Thank you.
I had no idea. Thank you, John, AGAIN for teaching me something new that streamlines the blogging-process! I’m indebted to you!
sure thing stevan!
okay now I’m curious..
I just saw that on “some” of my link-only-embeds, the youtube embed works flawlessly but on others… notsomuch
I did just change web servers.. (due to a nasty hack that deleted EVERYTHING)
check out this post and see what i’m talking about
http://www.stevansheets.com/?p=4777
do you have caching? any other competing plugins?
Great tip here today. More efficiency=awesome.
Don’t have an ipad yet, maybe one day…
hehe.
Wow, very helpful. Thanks!
sure thing josh!
I’m trying #3 out on a draft, but when I preview it, I only get the url. I’ve been copying and pasting the html (and adjusting size manually), but this rocks.
now if I could just get it to work…
okay, i think i found the hitch. each youtube video has about 12 different url’s. not all work…
yes. not all of them work.
Made the change! I’m not sure I’ll be adding any videos anytime soon, but it would be cool to add a cooking demo. We’ll see.
sweet! well, you’re set for success!
None of these methods seem to work when YouTube is blocking the Embed code.
See, for example, this Video:
http://www.youtube.com/watch?v=T8dyxGiBx3g
There is no Embed code, and no matter what I do, I cannot seem to get the video to show up in my blog. What am I doing wrong?
How about this…
http://cl.ly/3X201B353A2n1r1x3L2R
Embedding is Disabled.
So when embedding is disabled, none of the methods described above work. Is that right?
of course. if you can’t embed it you can’t embed it!
So many of the techniques in this series have already helped me out. Awesome! I can see a huge advantage to using these features. Thanks.
sure thing dave@!
Thanks John,
This is really helpful.
glad i could help!
I have learned more about WordPress in 4 days of reading your blog than I have in a month of trying to navigate WP’s Codex. Great job John.
ah man, thanks chris! that’s such an encouragement. i try to make it simple and easy to follow….. the codex is great, but sometimes a little overwhelming.
Thanks for this I just uploaded the standard theme last night and wasn’t able to fix the video I already had posted to the correct size.
sweet! excellent.
I have the ‘auto-embed’ checked and put the link in and publish–all I see is the link. Could it be the theme I’m using or something else? On the outside chance you check my blog, I’ll leave the link in where I was hoping to stick a video.
where’s the link?
it’s under the first bullet point. (right above the ‘No Quarter by Led Zeppelin)
can you screen shot the editor?
i have a feeling there’s simple way to do it on my macbook, but I’m not sure how.
I also just republished. It might have been missing from my most recent update.
totally works for me:
http://cl.ly/152A0K200Y1E2Q0P200P
and
http://cl.ly/3w0R0K2y093l1M3A3h21
you might have to take off the “italics” for it to work.
John,
This is the same thing that is happening to me. The auto-embeed box is checked. I just see the link. I tried to put it on “visual” and “html” – both just show the link.
Nevermind..works like a champ.
I’m a dummy. I was trying to embed a video that I had not gave permission to embed.
#PwndMySelf
My jaw is on the floor…dropped. Wow. I’ve been doing the long way. Tested #3, and it works great. Thanks!
hah! tricks of the trade my friend.
Posts like this are why love your blog and the 8-bit Network.
I just posted a video and went to my reader and found this. Perfect timing!
sweet! great!
I’ve never had a whole lot of luck with the auto embed feature.
I wonder if it’s something funky with my theme or a plugin.
I had been using Vipers Video Plugin which makes embedding (with validated code) a snap.
But I’ve recently been using the iFrame option from both YouTube and Vimeo to get around the flash/non-flash issues.
When I try to auto embed now, the video shows fine in my browser (Chrome) but I only get a huge white space on my iOS 4.2 browser.
No option to click to view, no video to view, just white space.
Tried in both HTML and Visual editor and tried the full URL (http://www.youtube.com/watch?v=cRTJTOQb2_Q&feature=player_embedded) and just the “base” URL (http://www.youtube.com/watch?v=cRTJTOQb2_Q)
No luck
Oh and here’s the post if anyone can test it on their mobile device: http://www.casadeblundell.com/jonathan/adventures-in-fatherhood-my-twin-boys-at-play/
i’m checking. odd. i’ll take a look.
Jonathan,
I too have had bad “luck” with the auto embed feature of wordpress and have installed the vipers video plugin on my blogs.
It’d be great if I didn’t have to use that though as I’d rather not use an additional plugin that bloats my blog.
sure. i’ve got a plugin that helps but it’s not perfect.
Awesome tip, thank you
sure thing sevie!
How do I know what the maximum embed width is for my theme?
you can always do a screengrab…. i think yours are like 650 pixels. try that.
Thanks John
Unbelievably useful! I’ve been using a plugin (Viper’s Video Quicktags) to do this for years. Never even realized that is was completely unnecessary. Thanks, John!
pretty sweet stuff, right?
Great time savers. Thanks for taking time to describe how we can optimize our blog by having the right settings
sure thing fernando!
This is a great, time-saving technique! Thanks John!
And, for anyone out there who may be having problems getting the embedded videos to show (all you see is the link to the video), I found that the technique doesn’t work if your editor thinks that the address of the video is supposed to be a clickable link. It’ll only show up as an embedded link instead of an embedded video (if that makes sense). You have to make sure the video address is treated as text and not “linkified.”
sweet! great clarification!
I’m working on switching my wordpress.com blog over to wordpress.org and your series has been extremely helpful! Thank you so much. I just finished embedding a video and #3 is way easier then how I was doing it before.
sure thing jessica!
Concerning auto-embeds: I’ve been using them for a while, but one frustration with this method is I don’t know how to specify for YouTube videos to playback in HD by default (which is easy to do using standard embed code). Is there a way to override the built-in WP protocol to enable default HD playback?
ah, i’m not sure…….. i’m going to look for this.!
The only thing that seems to work for me is cutting and pasting the embed code (with the iframe). Sure wish I could use the auto-embed feature. I’ve got auto-embed turned on, but it just shows the URL when I preview the post. I’ve got HTML viewer turned off and use Markdown by default. Could that throw things off?
hmmm……..
there could be some plugins that might be interfering…
also, have you seen the new jetpack?
http://tentblogger.com/jetpack/
Here are the plugins I’m using (a lot more than I realized):
Akismet
All in One SEO Pack
cforms
FeedBurner FeedSmith
Feed Statistics
Fotomoto
Markdown
Page Links To
ShareThis
SmartyPants
TentBlogger Optimize WordPress Database Plugin
WP Post Thumbnail
If I had to bet though it’s probably Markdown or Smartypants.
hmm. don’t know about some of those. you can use shortcodes too now.
I installed Jetpack and used the video embed shortcode, and it works pretty well. It’s still wider than my post area, but it works beyond that. Thanks!
you can customize the size though!
Oh man if I had a shortcode for embedding Google maps that would be awesome.
Heh, found it: http://digwp.com/2010/01/google-maps-shortcode/
Unfortunately, with the upgrade for WP 3.1 they took out the embed video button. Therefore, I have no idea how to embed a video anymore. Help anybody?
you should use my plugin: http://tentblogger.com/rss-video-embed/
Interesting… I’ve now been using Jetpack for a while to embed my videos but they never show up in Google Reader!
Thought I’d check what you do (as yours do show up) but it looks like your lates one (about the power of words) uses the native youtube embed code??
Am I missing something here?
Cheers
no, it should be using vimeo and the plugin that I use.
John,
I’m confused, which plugin is that (that you are using)?
http://tentblogger.com/rss-video-embed/
Thanks John,
We met at my first wordpress group meeting last night.
My specific goal was to determine why i was having so much trouble with video. This answers my question… no plug-in required.
Thanks so much! See you at word camp.
awesome! glad it helped!
Nice article, thanks. I’ve got a question for ya…
At the end you mention ‘WordPress embeds the mobile-ready versions of the platforms so that your visitors can watch them on your mobile device…’
What does that mean? Also I’m confused if the functionality you describe in this article is from WordPress itself or the jetpack plugin (I guess I can check by just deactivating the plugin if I really want to know..)
Anyway, from what I see, with method 3 above, you still get an IFrame which is something that, for example, http://validator.w3.org/mobile/ tags as a serious problem.
Is there another method to embed videos into your wp pages and posts that doesnt use Iframe, and is therefore more mobile friendly?? Or am I being anal by trusting that validator output, lol???
Thanks.
you might be anal…. especially since youtube using iframe:
http://i.john.do/DjwY
When using the youtube embed, does clicking on the play button take you out of your blog and onto youtube, or keep the visitor on your blog?
it should just keep you on your site.
help! i am trying to do option two – but on my wordpress my add media option does not look the one one you show above.
when i go to add media -> from url -> video, audio or other file . . . and insert my youtube link, it just creates a link on my page and not the actually video…
I want ppl to be able to watch the video form my page. What am I doing wrong?
it should be just a link. do you see it on the front-end?
John… Have you tried to embed an NBC clip from their site? I keep trying, but it just give the link. I wasn’t sure if there was a way to embed it YouTube style.
hmm. we didn’t build it for NBC.
I just was trying to put it on my little wordpress.com site (it’s a little journal for my wife). She died laughing at a couple clips and NBC always blocks YouTube eventually.
Darn NBC… They had code that seemed to indicate the video could be embedded:http://www.nbc.com/up-all-night/video/rave-it-up/1389629
Anyway, I guess they want to drive the traffic to their site.
I’m also struggling to embed a video. I have loaded the video to the media player and I have auto embed turned on. first it was just showing the link then I read on here to stop it being a link so I pasted it in the html and now it is just showing as text. I was trying a plugin to embed it but that just showed a blank space
I know I can just load the video up to youtube and embed it with a plugin I know works but I don’t really want this vid on youtube I just want it on my site. Any more ideas please?
can you send me a screenshot of what you’re doing?