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!
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:
[youtube width=300 height=200]IenCauHymlo[/youtube] 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.