If you've ran across the issue like I have, chances are YouTube videos do not fit your website perfectly. My website and it's columns are not the same width as a YouTube video, so if I post a video either in my main column, or side column, it is either going to blow out the column (right side), or not fill up the column (main column).

Either way, this somewhat throws out my design, and makes everything look like it wasn't prepared very well. It also makes little sense to really take account the width of standard YouTube video sizes when building a layout, rather those videos should be able to fit into our own needs.

So I've created this quick YouTube Video Resizer so that I can quickly determine the appropriate height at which to render a video based on the width of the column it will be displayed in. Essentially, this can be done by simple cross multipication, and I will first explain the process, as well as providing a simple tool so that you may avoid the math portion of you choose!

The easy jQuery way to resize your YouTube videos...

Supplied code snipped to embed video supplied by YouTube (or others)

Width in pixels to resize the video to in order to fit your layout

Resized code to embed video they way you want it to look

The Math behind the Madness

Each video site includes a code that you an use to embed the video on your own site or blog. Inside those snippets of code, you will find a height and width tag in the html.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/eV__oOckAPM&hl=en&fs=1&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/eV__oOckAPM&hl=en&fs=1&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

In both YouTube, and Google Video snippets, you will find two areas where the height and width are located, so we will have to modify both of these in order to accomplish the resising we want.

Simple math can now be applied once you have the height and width of the original video you'd like to resize.

Current Width / Current Height = Desired Width / Unknown Height
or essentially,
W1/H1 = W2/H2

So we plug in our variables and get:
425/344 = 550/??? so our unknown height becomes 445.17 pixels, or rounded down to 445px.

So now the default YouTube video, rather than being 125px narrower than the main column on my site can now appear perfectly, like it was made to fit in the column. Now, I am stretching the video a little, so obviously, it will sacrifice the video qualit a bit. Resizing up to something like 800px wide probably wouldn't be recommended, as I doubt many videos on YouTube are high quality enough to handle that wide of a resolution.

Sample Resized Video

So, enjoy this quick little feature, along with the theory behind doing this by hand for any code snippet that may not fit into how this jQuery YouTube Video Resizer works. Maybe at some point, I'll explain the jQuery I used to accomplish this, but for now, it's a useful tool to post resized videos from YouTube, and Google Video among others.

Enjoy!!