How To Adjust YouTube Videos When Embedding Them in Your Blog or Website

Do you notice something wrong with the video below?



It's not displayed correctly - the video window is larger than the content column. So how can one change this?

First, you should know the width of your posting column in your blog (Blogger, WordPress or other blogging platform). If you use Blogger then you can find this easily by viewing the HTML structure of your blog: from dashboard go to Layout/Edit HTML. Press CTRL and F on your keyboard and type "#main-wrapper" in the search box. The browser will highlight the text for you and you'll be able to see the width of the main column - see picture below, 430 pixels in my case.

Now that you know the width of the content area you can work on adjusting the dimensions of the video for proper embedding and a neat display. Before doing that let's look at the HTML code of the video and understand it:

<object height="295" width="480"><param name="movie" value="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="295" width="480"></embed></object>

The red and green lines of code represent the size of the video - the height and width in pixels. What you need to do is change the values within the inverted commas to the values you need your video to be displayed in. In my case I need to adjust the width to 430 pixels and in the same time I must keep the proportions of the video window.

In order to know what the new height will be - I know that the width must be set to 430 - I'll do some math:
  • Finding out the proportions of the video: 480/295=1.62
  • Finding out the new height: 430/1.62=265.4 ~ 265 (will work with round numbers)
  • Verifying if the new dimensions respect the original proportions: 430/265=1.62 OK!
Thus the new code will look like this:

<object height="265" width="430"><param name="movie" value="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="265" width="430"></embed></object>


And the result like this:



If, for example, the video is smaller than the space available for posting then you may want to align your video either in the center, left or right of the column. In the examples below I will use the same video but I will make it smaller by modifying its dimensions.

Align your video in the center:

<div align="center"> <object height="123" width="200"><param name="movie" value="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="123" width="200"></embed></object> </div>





Align your video to the left:

<div align="left"> <object height="123" width="200"><param name="movie" value="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="123" width="200"></embed></object> </div>





Align your video to the right:

<div align="right"> <object height="123" width="200"><param name="movie" value="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/c94wOZqr1xY&hl=en_US&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" height="123" width="200"></embed></object> </div>





That's all. I hope this clarifies it. If not, write me an email and ask me - I'll respond even if I don't know the answer :-).

Cheers!


Thanks for stopping by! Share this article with your friends.

3 comments :

  1. Very Good efforts, i suggest here you should kept to gather her Airsoft Guns

    ReplyDelete
  2. Great tutorial. Thanks! Do you know how to make a YouTube video less than 200 pixels wide? I need to make one about 175 pixels to fit into a narrow side column I have on a shopping cart.

    CD

    ReplyDelete
  3. Hi Curt!

    I think YouTube doesn't allow a video size smaller than 200 px width.

    Try uploading your video on Vimeo. I've just tried and I resized a video to 175 pixels. It works.

    Cheers!

    ReplyDelete

Please use your personal name and NOT your business name to comment. Enjoy the blog, the T-shirt designs and thanks for joining the conversation!