Embed Videos in WordPress the Right Way: Save Time, Increase Views, Be Awesome

[tentblogger-youtube oHg5SJYRHA0]

[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:

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.]

  • http://www.geeee.com Geeee

    I must say that you did save me a lot of time indeed :) thanks a lot and keep up the good series

    • John Saddington

      sure thing geeee!

  • Adam

    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 :).

    • John Saddington

      sweet!

  • Eric Dye

    Thank. You.

    • John Saddington

      sure. thing. dude.

  • Kevin

    So this was 193% helpful!

    • John Saddington

      whoa! tha’ts……. big!

  • Chris

    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!

    • John Saddington

      which plugin!

  • Jon Stem

    Love it! Thanks!

    • John Saddington

      sure thing jon!

  • http://www.rickwsmith.com/blog Rick Smith

    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?

    • John Saddington

      did you click the button to for “auto embeds”?

      • http://www.rickwsmith.com Rick Smith

        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…

  • http://www.chrisrouse.us Chris Rouse

    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?

    • John Saddington

      that’s a good point. i’m not sure. i’ll have to check on that.

      • http://www.rickwsmith.com Rick Smith

        Nevermind..works like a champ.

        see below!

  • http://gbrenna.com Graham

    I’ve been grabbing the embed code and pasting it into the HTML tab. This is quicker. Thanks!

    • http://stephenbateman.com Stephen Bateman

      me too. this post was an “oooOOoooh” moment for me.

      • John Saddington

        haha.

  • http://www.danieldecker.net Daniel Decker

    Awesome sauce. Now that is a nice tip to have! Thank you.

  • http://www.stevansheets.com Stevan Sheets

    I had no idea. Thank you, John, AGAIN for teaching me something new that streamlines the blogging-process! I’m indebted to you!

    • John Saddington

      sure thing stevan!

      • http://stevansheets.com Stevan Sheets

        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

        • http://john.do John Saddington

          do you have caching? any other competing plugins?

  • Justin Winter

    Great tip here today. More efficiency=awesome.

    Don’t have an ipad yet, maybe one day…

    • John Saddington

      hehe. :)

  • http://joshcousineau.com Josh Cousineau

    Wow, very helpful. Thanks!

    • John Saddington

      sure thing josh!

  • David Norman

    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…

    • David Norman

      okay, i think i found the hitch. each youtube video has about 12 different url’s. not all work…

      • John Saddington

        yes. not all of them work.

  • http://www.speckleofdirt.com Tammy Cannon

    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.

    • John Saddington

      sweet! well, you’re set for success!

  • http://www.tillhecomes.org/blog Jeremy Myers

    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?

    • John Saddington

      How about this…

      http://cl.ly/3X201B353A2n1r1x3L2R

      Embedding is Disabled.

      • http://www.tillhecomes.org/blog Jeremy Myers

        So when embedding is disabled, none of the methods described above work. Is that right?

        • John Saddington

          of course. if you can’t embed it you can’t embed it!

  • Dave Anthold

    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.

    • John Saddington

      sure thing dave@!

  • chefJOSEPH

    Thanks John,
    This is really helpful.

    • John Saddington

      glad i could help!

  • Chris

    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.

    • John Saddington

      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.

  • http://www.beautyisdiverse.com Beauty Is Diverse

    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.

    • John Saddington

      sweet! excellent.

  • Rodlie Ortiz

    My jaw is on the floor…dropped. Wow. I’ve been doing the long way. Tested #3, and it works great. Thanks!

    • John Saddington

      hah! tricks of the trade my friend.

  • http://brettcohrs.com Brett

    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.

    • John Saddington

      where’s the link?

      • http://brettcohrs.com Brett

        it’s under the first bullet point. (right above the ‘No Quarter by Led Zeppelin)

        • John Saddington

          can you screen shot the editor?

          • http://brettcohrs.com Brett

            i have a feeling there’s simple way to do it on my macbook, but I’m not sure how.

    • http://www.rickwsmith.com Rick Smith

      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.

      • John Saddington

        :)

    • http://www.rickwsmith.com Rick Smith

      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

      • John Saddington

        :) word.

  • http://erikscottberg.com Erik Scottberg

    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!

    • John Saddington

      sweet! great!

  • http://casadeblundell.com/jonathan Jonathan Blundell

    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 :-(

    • http://casadeblundell.com/jonathan Jonathan Blundell

      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/

      • John Saddington

        i’m checking. odd. i’ll take a look.

    • http://www.mattfraser.name Matt Fraser

      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.

      • http://john.do John Saddington

        sure. i’ve got a plugin that helps but it’s not perfect.

  • http://www.videotutkusu.com sevie

    Awesome tip, thank you :)

    • John Saddington

      sure thing sevie!

  • http://johnsnook.com John Snook

    How do I know what the maximum embed width is for my theme?

    • John Saddington

      you can always do a screengrab…. i think yours are like 650 pixels. try that.

      • http://johnsnook.com John Snook

        Thanks John

  • http://designsbychris.com Chris Huff

    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!

    • John Saddington

      pretty sweet stuff, right?

  • http://jornadadeumlider.com Fernando

    Great time savers. Thanks for taking time to describe how we can optimize our blog by having the right settings

    • http://john.do John Saddington

      sure thing fernando!

  • http://www.jonathanwilliamsonline.com Jonathan Williams

    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.”

    • http://john.do John Saddington

      sweet! great clarification!

    • Phil

      What do you mean editor? Are we just dealing with WordPress?

  • http://jessicadtorres.com Jessica

    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.

    • http://john.do John Saddington

      sure thing jessica!

  • Andrew

    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?

    • http://john.do John Saddington

      ah, i’m not sure…….. i’m going to look for this.!

  • http://www.bradblackman.com Brad Blackman

    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?

    • http://john.do John Saddington

      hmmm……..
      there could be some plugins that might be interfering…

      also, have you seen the new jetpack?

      http://john.do/jetpack/

      • http://www.bradblackman.com Brad Blackman

        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.

        • http://john.do John Saddington

          hmm. don’t know about some of those. you can use shortcodes too now.

          • http://www.bradblackman.com Brad Blackman

            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!

            • http://john.do John Saddington

              you can customize the size though!

  • Larz

    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?

  • http://www.pgardnernz.com Paul Gardner

    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

    • http://john.do John Saddington

      no, it should be using vimeo and the plugin that I use.

  • http://morrisseymandalas.com Robert

    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.

    • http://john.do John Saddington

      awesome! glad it helped!

  • http://acuafshin.com Afshin Mokhtari

    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.

    • http://john.do John Saddington

      you might be anal…. especially since youtube using iframe:

      http://i.john.do/DjwY

  • Anne

    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?

    • http://john.do John Saddington

      it should just keep you on your site.

  • http://amandafrances.com Amanda Frances

    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?

    • http://john.do John Saddington

      it should be just a link. do you see it on the front-end?

  • http://brettcohrs.com Brett

    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.

    • http://john.do John Saddington

      hmm. we didn’t build it for NBC. :)

      • http://brettcohrs.com Brett

        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.

  • http://www.alsufouhtram.com Marian

    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?

    • http://john.do John Saddington

      can you send me a screenshot of what you’re doing?

  • http://facebook.com/planetbarbados janeshattuck

    Thank you so, so much. Each and every time I tried to add a video to my WordPress blog I had to come up a time-consuming learning curve which entailed doing it wrong a number of times. Your quick method #3 is a snap and I’m forever grateful. Many thanks.

  • http://beautifulinhistimeblog.wordpress.com Aprille

    This is not working for me with a photobucket video…following the instructions exactly and even checked privacy settings on photobucket. Any thoughts?

  • http://gravatar.com/bkuberek bkuberek

    I want to add rel=0 to my youtube embed URLs. How do I do that? I am trying to use the [embed attr="value"]http://youtube.com/watch/hbdfv[/embed] but is not working.

    • http://john.do John Saddington

      not sure you’re using the right code….

  • http://hipo@pc-freak.net Georgi

    This is very nice article. Thanks for it man! It inspired me to write an article based on yours :)

  • http://gravatar.com/davidthomas803 anou

    Auto embed in 3.4 seems not working anymore… must use shortcode [embed]YOUR-URL-VIDEO[/embed] to be sure to embed properly a video in WP 3.4…

    • http://gravatar.com/gmeben gmeben

      Thank you for this, anou.

      I’m using the current version of WordPress (3.5.1) and this remains to be the case, despite what WordPress.com’s very own support page says regarding this topic: http://en.support.wordpress.com/videos/youtube/

      It’s shameful that it hasn’t been updated yet.

    • http://www.twintough.com Rachel @Twin Tough

      Thank you so much for clarifying this. I tried everything, then tried this shortcode, and it worked perfectly! Thank you! Thank you!

  • http://pitealand.wordpress.com pitealand

    Hi John! First of all, great article! Now, what I would like to know is how to embed a video from a website that is not on that list. For example for this video http://www.myvideo.ro/watch/4829425/One_Headlight I have the following code that I write in the Text editor:

    One Headlight – MyVideo

    but after I save the draft wp updates my code to this: One Headlight – MyVideo

    This results in only showing a link, instead of embedding the video. I have tried to go and turn off the WYSIWYG-Editor but there is no such option where I read I should find it: User->My profile.

    I have also tried this way: [gigya src="http://www.myvideo.ro/watch/4829425/One_Headlight" width="512" height="288" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" base="." ]

    but with no results.

    Do you have any sugestions?

  • http://bakerette.com/ Jennifer Scott

    Looks like this article is now outdated for WP 3.5.1. Can you offer another suggestion on how to embed video into the latest version? Also, I don’t have any of the icons showing on your WP header. I don’t have a media button or when I open Settings/Media it doesn’t offer me the same menu. Only for Image Sizes, Uploading Files, and Image Gallery Carousel.

    • http://John.do/ John Saddington

      just use oembed. meaning, just copy and paste the link in the blog post and you’re done!