Embedding YouTube Videos in WordPress Blog Posts

I came to YouTube late in life. For years, I used it so rarely that I usually couldn’t remember if it was “YouTube” or “UTube”. No matter who you are, your mom is very likely more experienced at using YouTube than I am.

It’s OK, I gave up on being cool many years ago.

These days, I actually use YouTube pretty regularly– and it’s great! I use it for SQL Server training videos. We have a YouTube channel which holds all our free training videos for Brent Ozar PLF. It embeds nicely with WordPress, and it’s free and easy for people to access.

The Standard Way to Embed Videos in WordPress

The standard way to embed videos in WordPress is just to insert the URL from the video straight into the text of the post. You visit a video (like this one), click the ‘Share’ button, and you get the magic URL. Easy!

Sharing a YouTube Video on WordPress- The Embed URL

Sharing a YouTube Video on WordPress- The Embed URL

There’s just one issue: when you embed the video, you don’t get to pick the size. When the video goes into the post, it goes in pretty big.

What’s Wrong with a Big Video?

Sometimes I want the embedded YouTube video to be big. If it’s the whole point of the post, go big!

But the problem with a larger video is that your audience is unlikely to read past it. When you come up to a big item that takes up a lot of room and you can’t see if the text goes on afterward, it functions like a roadblock. You may go up and look at it, but you may also just go somewhere else instead of scrolling down.

Sometimes I want to add a short video to a longer blog post. I want the video to be a small, optional accessory. In these posts, the text of the blog stands on its own, and readers may just want to watch the video for more information or a little commentary. In these cases I want to make the video small so that people see the text as the major feature, and the page flow pulls them farther into the post.

How Do I Embed a Smaller YouTube Video Into a Blog Post?

To get this done, I’m trying out the Artiss YouTube Embed Plug-In.

With the plugin installed, I just used the following code for my video:

Let’s Try It Out, Shall We?

Let’s pretend I wrote a technical blog post here. <start pretend blog post text>I’m going to tell you ALL about heaps in SQL Server. If you don’t feel like reading and want to turn on a little TV, check out my video here:


Otherwise, keep on reading.</end pretend blog post text>

Since the video is small, you can see this paragraph really easily, and since you can see how much is coming you can make an informed choice about whether you want to read first, or watch first. WOO HOO!

Can We Do Better? Getting the Video Inline

That first attempt is OK, but it looked a little blocky. What I would really like is to have the video inline with the text, like an image. I want the video to hang out over on the right side of my post and let the words flow around it. It’s OK if you don’t watch it– in fact, the video is completely unconcerned about the whole matter. It’s just sitting there, looking good. “This is totally optional, man.”

To achieve this, I need just need to bring some HTML into my post. I can use the <div> class to fix this up, by using something like this:

HEY, that totally worked! I’m a fan.

What About RSS Feed Readers?

If you’re reading this in an RSS Feed Reader, well, I wish I could make things pretty for you. The “Getting the Video Inline” paragraph probably looked pretty weird to you– and it’s because I can’t get things inline in an RSS feed. It’s just a big wad of XML, so the RSS feed readers pretty much do what they want. If you know of a way to do slick formatting in RSS, let me know!

If you’re trying to solve this problem on your own WordPress blog, check out theĀ Artiss YouTube Embed Plug-In.

Tags: , , ,

3 Responses to “Embedding YouTube Videos in WordPress Blog Posts”

  1. Travis Gan June 13, 2012 at 12:24 pm #

    I notice that you used a smaller sized video in recent posts at BrentOzar.com. From this post I realize that you are using the Artiss plugin instead of the regular Youtube embed code. The only thing is these smaller sized video using Artiss doesn’t have the Full Screen option, which make reader like me have to temporary leave the site in order to watch the full screen video on Youtube site (I am not sure if that is what intended). I think having a Full Screen option on the video may encourage reader to stay longer on the site, or their RSS reader.

    I personally have not used WordPress nor Artiss, but from Artiss documentation http://wordpress.org/extend/plugins/youtube-embed/other_notes/, Full Screen Parameter does not work for EmbedPlus or IFRAME if using HTML5. So I am not sure if that is the limitation here. The final HTML generated from the Artiss has the fs (full screen) parameter on Youtube link set as 0 (no full screen), instead of 1.

    Just in case if you are not aware, Youtube actually has a easy option for custom sized embedded video. In the same share setting you mentioned in the blog, and by clicking the Embed button shows a set of different size option. (Hm.. maybe it is not common to embed video this way on WordPress).

    Thank you for all these technical knowledge you contribute to the community!

    • Kendra Little June 13, 2012 at 12:30 pm #

      Hi Travis,

      Thanks for your comment!

      Dynamic resizing would be awesome. I haven’t been able to get the YouTube embedding code to play nicely with WordPress by itself– you’re right about that. I believe you almost always have to have a plugin of some sort to get it to work nicely.

      I’ll look into the resizing options more.

      kl

  2. kevin November 9, 2013 at 4:32 am #

    Hi,

    Im really struggling to make my videos play in the main blog stream for my site, I see that they play ok in the post itself but just don’t show up in the blog itself. Any ideas peeps??

    Thanks,

    kevin

Leave a Reply