Tech Tuesday: Resizing YouTube Videos on Blogs

Have you ever been to a blog (maybe your own) where there's a video embedded in the post but it's hanging outside the area where the posts are? Kind of like the blog version of muffin-top, I suppose.

Now that I've left you with that oh-so-charming image, let's move on to how to fix that problem. Here's a sample video, of Ricky Gervais talking about meeting Elmo (did you see him host the Golden Globes? He was great! Especially his dig at Mel Gibson. I tried getting footage of that, but NBC's copyright won't allow it to be posted on YouTube). If I were to insert it directly into my post without modifying it, it would show up like this:

Do you see how it's hanging over the right-side of the page? To change that, you'll need to modify the code (which you get on the You Tube page, to the right of the video where it says "embed"). Here's what the code typically looks like:
<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/52c6tMhxBVw&hl=en_US&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/52c6tMhxBVw&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
You will need to change the sections that say "width" and "height" to smaller numbers (shown in red above), making sure the width is no larger than the size of your main wrapper (search for that in your HTML code to find your width). I changed the height of the above code to "400" for the width, and "250" for the height. You should try to keep the ratio as close to the original as you can, so the video images aren't too distorted. Make sure you change both sets of number (in red) above.

Here's the new video.

Much better. Bye bye bloggy muffin-top!