Resizing Youtube video to fit main column or sidebar using calculation

Update: For embedding Youtube video, you can do the resizing at Youtube.com itself by either ticking one of the 4 size option (560x340 640x835 835x505 1280x745) or by clicking CUSTOM and typing in your choice of width while letting Youtube automatically fill in the value for the height to keep the aspect ration constant (see screenshot below). However the method described in this post will still be useful if you want to resize other video embed codes or similar:

Method of resizing video embed codes while keeping aspect ration constant

Two previous posts Embed video in blog post and Embed video in sidebar described how to use Irfanview photo editor and resizing image to help resize Youtube to fit the width of the main column or the sidebar of the post. I have been told that Irfanview may not work on a MAC.

In this case, we will have to resort to mathematics, using proportion (ratio) to keep the resized video undistorted. I will do this using example. Below is the code for embedding a video:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

Let's say we want to fit the video post (main column) into a blog using the standard Blogger 2 column Son of Moto template which main column has a width of 400 pixels (refer to How to find the width of the blog Header, main column and sidebar). Note from the code above that the the width and height of the video is 425 and 350 respectively, so the video is too wide for the main column and we have to resize it down to, say 395 pixels wide. In order that the video be undistorted, the height will also have to be resized down, say to h pixels.

Thus we have

original width = new width
original height   new height

Thus

425 = 395
350     h

Transposing, we have

h  = 395 x 350 = 325
       425

Thus the resized video will be 395 pixels wide and 325 pixels high, and the code for embedding the video should be changed to

<object width="395" height="325"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="395" height="325"></embed></object>

Resizing video to fit sidebar

Taking the same example blog (Son of Moto 2 column) which has sidebar width of 226 pixels, let's say we want to resize the video width to 220 pixels. Using the same calculation like above, we have

425 = 220
350     h

Transposing, we have

h  = 220 x 350 = 181
       425

Thus the resized video will be 220 pixels wide and 181 pixels high, and the code for embedding the video should be changed to

<object width="220" height="181"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="220" height="181"></embed></object>