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!
| <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!
Share this article with your friends!
3 Comments:
Please use your personal name and NOT your business name to comment. Any business name or any other links in the comment text will be considered spam. Enjoy the blog, the free vectors and thanks for joining the conversation!