Resizing the YouTube Videos

Here's the scoop on easy HTML tips, SEO (search engine optimization) and all news on technical features and softwares!

The topic for today is: resizing the YouTube videos!

This one's easy. First you need to go to the video on YouTube that you want to embed in your post. Each little video has its own embedded code for you to copy and it's located in the bottom right corner of the clip. Click the embed button, then copy the code and paste in your post. What you need to change from the code to actually fit your blog's layout is the width=" " and height=" " size. Here's an example from the new Harry Potter trailer:
Now this video's code says the values for width and height are 640x385. You want to make this video working with your layout so for this you need to change the width="640" into your main wrapper's width(you can find that if you hit the Design button in your dashboard, then the Edit HTML button, then find the "#main-wrapper" value and look for the width). It should look something similar to this:
The number shown in the width is what you need to determine the width of the video. In this case it should be 700, but just to make sure it fits(in case you have other frames or stuff) I'll say 600 should be safe. Now that we determined the width of the video we need to find out the height too. To determine the height of the video without making it look stretched out, the formula for that is this:

original width = your blog's width
original height     new height

in our case:
640 = 600 => x= 600x385 => x = 360
385       x                 640

So the right code for this video to fit a 700px wide layout would be this:
<object width="600" height="360"><param name="movie" value="http://www.youtube.com/v/_EC2tmFVNNE&hl=en_US&fs=1?rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/_EC2tmFVNNE&hl=en_US&fs=1?rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="360"></embed></object>
You need to change the 640 and 385, from before, into 600 and 360, both in the upper part of the code and in the lower part as well. That would make the video fit like so:

Hope it helped!! For more tips on HTML, SEO, blogger help and more, check back everyday so you don't miss any of the Technical Support :)