Stupid Embedder Tricks #2 : YouTube Video Embeds

Today we’re going to look at a couple of ways to create embeds for YouTube videos, demonstrating the flexibility of the Embedder plugin.

First we need to go and grab some embed code from YouTube. Any video will do, though it probably makes sense to start with one you are likely to want to embed. Click on the Embed button below the video, and a panel will appear with the HTML embed code and a range of options you can use to tailor the size and look of the video.

Once you have selected the options you want, just copy and paste the generated HTML into a new global embed on the Manage Embeds page and give the embed a suitable name, like youtube.

This is the HTML code I copied over:

<iframe title="YouTube" type="text/html" width="480" height="390"
src="http://www.youtube.com/embed/hOSYiT2iG08?rel=0" frameborder="0"></iframe>

I selected the iframe option just because it makes the generated HTML code shorter and easier to handle, and selected a width I know will fit within the bounds of my posts.

We could finish there, but the embed would only ever show one video, which would be a little dull, so let’s locate the video code—the code used by YouTube to identify which video to play—in red above, and replace it with an attribute:

<iframe title="YouTube" type="text/html" width="480" height="390"
src="http://www.youtube.com/embed/%v%?rel=0" frameborder="0"></iframe>

I prefer to use short attribute names, since it makes it quicker to type the embed, and the embed name of youtube makes it obvious what the %v% attribute refers to. (You can always use %vid% or %video% if it helps.)

But we can do more than that. Perhaps you might occasionally want to use the same embed in a sidebar widget, which is likely to be far less than 480 pixels wide, so replacing the width and height values with attributes is also a good idea.

However, if you’re happy with the 480×390 size most of the time, then it’s going to be a pain to have to remember those values and type them in every time you use the embed. So for these two attributes we can set default values:

<iframe title="YouTube" type="text/html" width="%w=480%" height="%h=390%"
src="http://www.youtube.com/embed/%v%?rel=0" frameborder="0"></iframe>

You set an attribute’s default value using the format: %attr=value% so remember to put the value before the closing % sign.

After saving the embed, all that’s left to do is use it somewhere:

[youtube v="hOSYiT2iG08"]

Notice that you don’t have to use quotes around the attribute’s value if it’s a single word with no punctuation, but it’s probably safer to get into the habit of using them.

And here is the video…

Recognize a rather youthful and jolly Doctor House?

Now I prefer my embedded videos to be centered on the screen with a little padding to space things out, and for that we need a little bit of CSS styling. But we cannot center an iframe element without first wrapping it in another HTML element—a <div> element to be precise.

We can do this in one of three different ways.

1. Edit the embed’s value, enclosing the iframe element in a div

   <div class="youtube-embed">
     <iframe title="YouTube" type="text/html" width="%w=480%" height="%h=390%"
      src="http://www.youtube.com/embed/%v%?rel=0" frameborder="0"></iframe>
   </div>

   Now we can create a CSS class in our blog’s stylesheet to do the centering and formatting:

   .youtube-embed {
     text-align: center;
     padding: 10px 0;
   }

   This is a perfectly good solution, but it does mean you have to play around with the embed code even more than you already have, which might be a bit of a pain if you decide to refresh the embedded HTML with an updated copy from YouTube. Thus we come to option two:

2. In the YouTube embed’s settings page, click the Wrap Embed option, select <div>, and type in the CSS style sheet class name you are using (e.g. youtube-embed). Now, every time you use the embed, it will automatically be wrapped in a div element with the class name(s) you specified.But there is one more option which, while it’s a little messier, gives your embed even more flexibility…
3. Let’s go back to the first option, but instead of specifying a class name on the enclosing div we’ll use a style attribute to plug the CSS values directly into the embed:

   <div style="text-align:center;padding:10px 0;">
     <iframe title="YouTube" type="text/html" width="%w=480%" height="%h=390%"
      src="http://www.youtube.com/embed/%v%?rel=0" frameborder="0"></iframe>
   </div>

   But why do this and have the CSS police yelling at you for no good reason? Ah, but now we have the CSS values in the embed, we can turn them into embed attributes too!

   <div style="text-align:%align=center%;padding:%pad=5%px 0;">
     <iframe title="YouTube" type="text/html" width="%w=480%" height="%h=390%"
      src="http://www.youtube.com/embed/%v%?rel=0" frameborder="0"></iframe>
   </div>

   By using attribute default values, we can set the CSS to the values we are most often going to use, but with the added flexibility of being able to override them whenever we want to. Thus, if we want the video centered, we can still just use the simplest form of the embed:

   [youtube v="hOSYiT2iG08"]

   But if we want the video, say, to be aligned to the right, with no padding at all we can do this:

   [youtube v="hOSYiT2iG08" align="right" pad="0"]

   And so on, giving you the most flexible embed possible.

Just for kicks, here’s a different video, embedded using the exact same plugin:

Of course, you can go wild and add all kinds of CSS to your embed (no matter which of the three ways you use). You can add colorful backgrounds and borders, or perhaps a float:right or float:left element to allow text to flow around the video. It’s entirely up to you. But the key thing is that once you have finished the embed to your satisfaction, you can use it as many times as you need, just about anywhere in your blog.

It might take a little bit more effort than using a dedicated YouTube or video plugin, but Embedder gives you a lot more flexibility to set things up exactly the way you want.

Finally, as a special bonus for reading this far (!), I am, for the first time, including the finished YouTube embed—one I baked earlier :-)—below. Just follow the instructions to add the embed to your own blog and start plugging in all those stupid pet tricks videos!