Ok, so this is a little tutorial using techniques I use all the time and covers how to embed a HD youtube video into your website as HD.

By default, Youtube automatically plays video (even HD video), on a much lower resolution. Several colleagues and clients have asked me for instructions on how to take their HD YouTube videos and embed them elsewhere, maybe into their own websites or blogs.   As I mentioned before, this isn’t an officially sanctioned feature, and as such, the embed code you get on these video pages will still yield the lower-quality, non-widescreen clips.  Needless to say, this is completely unacceptable.

The good news is that you only need to make a few changes to the stock embed code get the job done, and it couldn’t be simpler.

So let’s say you are wanting to embed a video of ‘Planet Earth’ – the BBC series (a great example to use here and a great show altogether!).  Let’s choose http://www.youtube.com/watch?v=CeacjOkLjZ0&hd=1

1. First thing to do, is click on the embed button underneath the video:

2. You will then see the embed menu:

Choose a size, player colour and other options if required.  Now, worth noting that ‘Play in HD’ is not what you think it is, as this will embed the full 1280 x 745 player on your page and is normally too big for the widest of websites.  Reducing the size also removes the HD autoplay, which we are trying to achieve, but that’s fine.  Choose the size you need and we’ll fix the HD issue now.  So for this example, I will choose 650 x 390 9to fit in this page.  After you have chosen the size, copy the code (the blue highlighted area in image above).

3. Now we need to enable autoplay in HD.  Paste the code into a text editor like notepad:

<.object width=”650″ height=”390″><.param name=”movie” value=”http://www.youtube.com/v/ofhwPC-5Ub4?fs=1&hl=en_GB&rel=0&color1=0x3a3a3a&color2=0×999999″><.param name=”allowFullScreen” value=”true”><.param name=”allowscriptaccess” value=”always”><.embed src=”http://www..youtube.com/v/ofhwPC-5Ub4?fs=1&hl=en_GB&rel=0&color1=0x3a3a3a&color2=0×999999″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”650″ height=”390″>

All we need to do is edit this code by adding in “hd=1&amp;” twice into the code.  I have highlighted below where this needs to go:

<.object width=”650″ height=”390″><.param name=”movie” value=”http://www.youtube.com/v/ofhwPC-5Ub4?fs=1&hl=en_GB&rel=0&hd=1&amp;color1=0x3a3a3a&color2=0×999999″><.param name=”allowFullScreen” value=”true”><.param name=”allowscriptaccess” value=”always”><.embed src=”http://www..youtube.com/v/ofhwPC-5Ub4?fs=1&hl=en_GB&rel=0&hd=1&amp;color1=0x3a3a3a&color2=0×999999″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”650″ height=”390″>

…and that’s it!  See below for a side to side comparison at the end result:

NON-HD	HD CODE MODIFIED

Try hitting ‘play’ on both at the same time to see the real differences.   Hope you find this useful.