Friday, December 12, 2008

Manually Sizing Blog Objects

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:

320/X=1.235

"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

Pam siggie 2

3 comments:

  1. I'm still trying to figure out how to make my blog template wider on one of my nature blogs so I can show larger photos! You are 2 steps ahead of me!

    ReplyDelete
  2. I will confess right here and now....I'm kind of a number nerd. I love math and playing with numbers. Thanks so much for sharing. Now I play with the numbers on my blog to make things fit better!

    ReplyDelete
  3. Good tip Pam!! I have to do that a lot with my 3 column layout too!! especially on my side bars!

    ReplyDelete

Your comments always make me smile. Thanks for taking the time to leave me a sweet note!

Note: Only a member of this blog may post a comment.

LinkWithin

Related Posts Plugin for WordPress, Blogger...