Sunday, December 13, 2009

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>

30 comments:

  1. Are you teaching me math?

    ReplyDelete
  2. this was a really nice info.......

    ReplyDelete
  3. Let me try to figure out the meaning of your comment. Either you are very proficient in maths and is being sarcastics or .....

    I had originally used resizing of image using Irfanview photo editor so one don't need to bother with calculation with the calculations for keeping the video undistorted.

    This post was in response to a blogger's comment Irfanview may not work for MAC in which case what should she do? I had initially thought of publishing this post in the less active Blogger for Dummies but published it here because posts here are more easily found by search engines because this now has become my main blog. For reasons, refer to Why I change the blog title of "Blogger for Dummies"

    BTW I hope readers will comment on whether it is appropriate to publish "elementary" posts here or is it better to do that at Dummies Guide to Blogger

    ReplyDelete
  4. I hope readers will comment on whether it is appropriate to publish "elementary" posts here or is it better to do that at Dummies Guide to Blogger

    I started subscribing to your feed along with Blogger Buster because I got some really useful tips. Even I can post tips like the ones you did in the last two posts. So I would suggest the posts like those to be posted somewhere else.

    ReplyDelete
  5. Dear Peter,

    I need your help. I had created a blog in 2005 but never did get around to doing anything with it. I have decided to revive it now. Unfortunately I am unhappy with the layout of the blog.

    I would like the "about me", "view my complete profile", blog archives, etc to appear on the right side of my blog. But no matter what layout template I choose on blogger - all these appear at the the bottom of the page. Could you help, please?

    I wish there was a way I could get you on a chat session and you could instruct me as I make the changes online.

    Looking forward to hearing from you!

    Nan

    ReplyDelete
  6. Kookie, refer to Sidebar pushed to bottom of page problem or ...

    I have more than one posts on how to troubleshoot problems like these but unfortunately I can't find them at the moment. Try searching Blogger for Dummies and Blogger tips and tricks using search terms like bottom of page, pushed to bottom of page, troubleshooting etc.

    ReplyDelete
  7. Great job....!!!!!!I really like it...

    Bathmate

    ReplyDelete
  8. Peter,
    i am having this problem in where i added 2 adsense ads to my sidebar, one 336 x 280 and the second one 160 x 600. I get a blank ads on my Home page and it has no problem with ads in between posts. When click into individual article those 2 ads appear. What seem to be the problem ??
    Try many ways and changed template many times but to no avail. Kindly help. Appreciate that.

    ReplyDelete
  9. Thank u so much! =))

    ReplyDelete
  10. Nice post but I think emailmeform.com is better than contacr. u should check it out.
    I m using this...
    http://urdusms88.blogspot.com/2010/01/contact-form.html

    ReplyDelete
  11. THANK YOU so much!!!! This really helped. Cheers!

    ReplyDelete
  12. THANK YOU! I'm on a Mac and I knew there had to be a simple solution to this, but I'm just un-blog-savvy enough not to have figured it out on my own. This works perfectly.

    ReplyDelete
  13. This didn't work for me. I am trying to embed an hd youtube video on my blog, http://stmenglish6-3.blogspot.com, and resizing the youtube video doesn't do anything to it. Could you offer me some input? Thanks.

    ReplyDelete
  14. I haven't really done any work with HD (high definition?) Youtube video and is wondering if the script for HD Youtube video is any different from the normal Youtube video. Can you let me have a look at the script (how to display HTML tags in posts and comments or give me some preferably clickable URL to HD Youtube videos?. Or you can contact me via my contact form

    Follow me at Twitter
    @bloggerfordummi

    ReplyDelete
  15. Brilliant! I wish I'd found this months ago. Thank you.

    ReplyDelete
  16. Thank you! Thank you! I was having such a time fitting my video into the sidebar of my blog. I finally got it with the help you provided. You have a new fan at www.cool2clip.blogspot.com

    THANK YOU!

    ReplyDelete
  17. Many, many thanks for the info! I was able to resize my videos so they werent spilling out over the edge of the columns. I just started making informational videos and this was very helpful. Thanks again!

    ReplyDelete
  18. thx so much~ your post is very useful~ save my day~ :)))

    ReplyDelete
  19. Thanks for the tip! Was driving me crazy until I found this post.

    ReplyDelete
  20. THANK YOU SO MUCH FOR THE HELP!

    such a simple solution to a mind-boggling problem.

    ReplyDelete
  21. I thank you for this post, and for posting it to this location. You are correct, a search engine quickly referred me here, and it was just what I was looking for.
    With appreciation.
    KR

    ReplyDelete
  22. I tried to do the math thing in my html code but it doesn't work on my computer :( I have a mac. I was going to try the other thing but you said that doesn't work on macs either. bah humbug.

    ReplyDelete
  23. multiply the original height and width by .82 and it should work. I just did that with mine - hope this helps


    http://ckearney.blogspot.com

    ReplyDelete
  24. Is there a program that will do it automatically?

    Thank you for the information.

    Plymouth Roofer

    ReplyDelete
  25. Automatic? Nope but Youtube now has provision for you to customize the embed code for any width and height you choose

    ReplyDelete
  26. Thanks Brother...
    and Wishing You MERRY CHRISTMAS and a Very HAPPY NEW YEAR to you and your family...!!!

    ReplyDelete
  27. Merry Christmas and Happy New Year to you too and to all the readers of this blog.

    ReplyDelete
  28. Thank you very much for sharing your knowledge. It helps someone like me (who is not smart at this at all) create a wonderful Therapy Dog website for sick people. Thanks

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics