When I first published yesterday's blog post, I noticed that the preset width for the YouTube video box was too wide for my center column; I have that problem sometimes since I switched my format from two-column to three-column.
Here's the YouTube-provided code to embed the video (note that I put a space before "embed" so that you could see the actual code):
< embed src="http://www.youtube.com/v/AhsSgcsTMd4&hl=en&fs=1" width="425" height="344" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" / >
And here's what the video looked like:
Yikes! It's too wide! My center column is 320 pixels; the code for the YouTube video is set at 425 pixels wide. What to do?
It's easy! You just need to change the code to a new height and width. The tricky part is keeping the same height and width ratio of the original so that your box doesn't look all stretched out or scrunched up.
Here's the secret: algebra. Yep, that nasty stuff that you took in high school and griped and moaned because you knew you would NEVER use it. Wrong! Here's the perfect application for simple algebra.
The original width was 425 and the height was 344. If you divide 425 by 344, you get a ratio of 1.235 (425/344=1.235). We want our new width to be 320 and the ratio to stay the same, so here's our formula:
"X" represents the new height for our video box.
Just divide the width you need by the ratio and you get the height you need: 320/1.235=258. New width is 320, new height is 258.
So I changed my code to look like this:
< embed src="http://www.youtube.com/v/AhsSgcsTMd4&hl=en&fs=1" width="320" height="258" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" / >
And here's what the video looked like after being manually sized:
Voila! The perfect size for my center column! You would use the same process to size items for your sidebar; just obtain your ratio by dividing the width by the height of your object:
CURRENT WIDTH/CURRENT HEIGHT = RATIO
Then divide the sidebar width by the ratio to get your preferred height:
NEW WIDTH/RATIO = NEW HEIGHT
If I've confused you terribly, please accept my apologies. If you had a "eureka!" moment, leave a comment! LOL