Adding a YouTube movie to your website is super easy – we all know that… But what if you want to customize the size of your movie so that it fits elegantly within the parameters and style of your site, then what?

I have a nice little formula for you that will help you resize any movie for you.

You see, it isn’t enough to just change the width of your movie – you must adjust the height too. But in order to keep the aspect ratio of the movie  intact (we don’t want to stretch, squish it or have a huge black border) we must reduce the height the same percentage as the width – but how?

Let’s take a look at a YouTube embed code:

<object width=”640″ height=”385″><param name=”movie” value=”http://www.youtube.com/v/hbnUbXX-8L0&hl=en&fs=1&”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/hbnUbXX-8L0&hl=en&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”640″ height=”385″></embed></object>

I have highlighted (in BOLD PINK) two places where you  will have to change the height and width information.

Say our center (content) column is 529 pixels wide, we can easily change the width from width=”640″ height=”385″ to width=”529” height=”385″ pixels. That’s the easy part – now how do we figure out the correct height?

If we only change the width, the movie looks like this:

Not elegant, big ugly black border… (FYI – I was the 1st Assistant Director on this Music Video).

We need to do a little math – wait don’t be scared, don’t even think of it as math – it is simply a system that will work every time. When you put your key in the ignition and turn it and your car starts, you don’t (I am guessing) ask why – you are simply happy that it works – do the same here.

Here’s what we do. First we find out what we know. We know (in this example) that the YouTube movie is  640 pixels wide and we also know that our center column is 529 – our movie must be only 529 pixels to properly fit on our page.

Here’s the math: We divide 640 by 529 to get a ratio of the difference. 640 divided by 529 equals 1.21. So to figure out the correct height we simply divide the current height by 1.21 to get our new height. 385 divided by 1.21 equals  318.

Easy right? The correct height of our movie is: 318. Now let’s take a look at the new code:

<object width=”529″ height=”318″><param name=”movie” value=”http://www.youtube.com/v/hbnUbXX-8L0&hl=en&fs=1&”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/hbnUbXX-8L0&hl=en&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”529″ height=”318″></embed></object>

This will work every time. To summarize:

1. Always start with an embed code that has the width of the movie wider than you need
2. Divide the original movie width by the width of your page.
3. Divide the original height by the answer in number 2.
4. Replace the width and height in both place in your embed code.

When we do the math, the video looks like this:

If you found this post helpful, please leave a comment or tweet about it. Thanks,

Lennie