This commercial always makes me giggle but the overhanging embedded video above is rotten right? Today I'll teach you how to fit youtube videos perfectly to your blog so they'll never overhang again! [proper video width shown at the bottom]
*
1. What is the center column width of your blog? (mine is 400)
To figure out the width of your blogs center column, right click on one of your landscape photos, then click 'properties' or 'view image info'. The first number in your dimensions is the max width.
(Sidebar: As long as you don't have a custom-coded blog layout, your center column is probably 400 and your landscape photos will load at a 'medium' format. Instead, select 'large' so that it fills the blogs ideal column width)
*
2. Now 'copy' the embedded code from the Youtube video.
*
3. 'Paste' the Youtube code into a blog post. Then open a new canvas in Photoshop (file>new) and pop in the dimensions found in the Youtube code (see the highlighted 480...385 in my code to locate where yours are). A blank canvas will pop up in Photoshop.
*
4. Now we'll shrink that canvas to figure out the new width & height for your video code. Go to 'Image Size' in Photoshop (Image>Image Size) and enter your blogs' center column width (from step 1) into the width box. The height will automatically adjust/scale and now you have the correct ratio for your Youtube video (that will fit perfectly)!
*
5. Using the new dimensions, replace the width & height into the code on your blog (see the 2 bolded spots above). The width goes first, then the height. Save your blog post and go back into it and the code will've turned into the video preview (or you can switch the 'edit html' tab and back to the 'compose' tab to achieve the same transformation).
Publish and you're done :)
*