How to align embedded YouTube video with the rest of the article - Short Tip

I have noticed before that on many websites that have embeded YouTube video the frame seems to never align properly. While this is something that annoys me, I always thought it's due to ignorance or indifference of the blog and website owners and put up with it.

It wasn't until I had to embed a video myself that I realised that it's not entirely straight forward as it escapes my CSS (which says something about my style sheets, but I actually don't give a damn) and understood that for many less interested in perfection bloggers and website owners would just simply give up and stop wasting time.

I thought I would make it easier for the future both for myself and the others, so please find below a short guide to all that can be done with embedded YouTube video so that it fits with all the rest of the article nicely. Basic HTML skills will come in handy but they are not necessary.

Below is a snippet of code for a YouTube video (Monty Python "And there was much rejoicing" form the Holy Grail movie). The underscored parts are added in to the code to allow for better alignment and I have replaced the brackets with square ones for clarity.

[object width="560" height="340" vspace="10" hspace="10" align="left/right/top/bottom" border="1"][param name="movie" value="http://www.youtube.com/v/enSYlCEz5VI&hl=en_GB&fs=1&rel=0&border=1"][/param][param name="allowFullScreen" value="true"][/param][param name="allowscriptaccess" value="always"][/param][embed src="http://www.youtube.com/v/enSYlCEz5VI&hl=en_GB&fs=1&rel=0&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"][/embed][/object]

1. Width and Height - those values appear in two places and they should be both changed if you wish to have a video with custom size. If you change just one it will not take. The values in double quotes are expressed in pixels.
2. Border - there are two ways of applying border. First one, adding border="1" after the width and height in first line. Second, is adding border to actual movie by adding &border=1 at the end of YouTube links they will look different, so check out what suits you best. You can only use one at a time.
3. Horizontal and Vertical Spacing - creates a margin on both sides or on top and bottom of the video. Handy when the text is indented and the video needs to align with it. vspace="10" and hspace="10" will create 10 pixels of a 'invisible' border around the video.
4. Text alignment around the video - normally not something that you would concern yourself with as the videos tend to take entire width of an article, but wrapping around can be achieved by using align="left/right/top/bottom" setting (delete the unnecessary).

I always make sure that I haven't missed any quotes, slashes or brackets ;) and preview the article before posting to make sure everything looks exactly as it's supposed to... and I would recommend it to everyone.

Go on. Use this tip. Stop annoying me.