Did you know that you could change the size of YouTube clips to make them bigger or smaller so that it looks better in different places on your blog? Yeah, and it's real easy too!
The standard dimensions of a YouTube clip is 425 pixels wide x 344 pixels high which looks like this:
Now, the width of my blog posts here at The Everyday Blogger is actually 500 pixels wide, and style wise I like the video to look more like it's filling up the space. So, a good size to accomplish that goal is 465 pixels wide as I alott for padding on the sides. When I change the size dimensions to a 465 pixel width, I can now get this:
The video now fills up the space more. Looks better huh?
As an example of making a clip smaller, over on the sidebar of this blog where I have 'The Everyday Blogger Weekly Video", the side bar is 335 pixels wide, and I resized the YouTube clip to 300 pixels wide again alotting for padding.
It's really wonderful that in the YouTube embed code they make it easy to adjust the clip sizes by just making 2 very simple changes in the code. So, this is what you do.
Copy & paste the embed code of your YouTube clip in the HTML editor part of where you want the video to go on your blog like in a post or a sidebar. For example, in TypePad, if you're putting a video clip into a blog post, switch to the "Edit HTML" view of your blog post and then paste the embed code from YouTube like so:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/V-a_cCBzXRg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/V-a_cCBzXRg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
In yellow, I've highlighted the places where you need to edit the code to make the clip the width size you'd like. In the current code, like I mentioned above, the default size is width 425 x height 344.
If you want to make the clip bigger to width 465, change the 425 number to 465, and for the height we are going to change the number to an equal proportion as the width difference. Meaning, in the width difference the pixel change was a 40 pixel increase: 465 - 425 = 40.
So then, we'll change the height number by 40 pixels from 344 to 384: 344 + 40 = 384. It's very important to make your width and height adjustments in equal proportions so that the video clip scales correctly, and looks good.
The new code to reflect your 465 pixel width and 384 pixel height will then look this:
<object width="465" height="384"><param name="movie" value="http://www.youtube.com/v/V-a_cCBzXRg&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/V-a_cCBzXRg&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="465" height="384"></embed></object>
If you want to make your video clip smaller, adjust the same highlighted numbers to reflect the smaller dimensions you'd like.
See. Wasn't that easy?
