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:



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

Share on Facebook Tweet this on Twitter Share on Stumbleupon Share on del.icio.us Digg this Share on Linkedin Send by Email Shar on Google More options...

Have Your Say...

Who We Are

With a mix of business, marketing, design and technical skills all under the one roof, we have the full in-house capabilities to design, market and manage all your digital needs. So dive in, take a look around and if you like what you see get in touch.

General enquiries: hello@psmdigital.com
Support: visit the FAQs
The PSM Digital Newsletter

Subscribe to our Newsletter and stay up to date with the latest news, offers and tech-talk.

Web Design & more

Being a digital agency, we don't just do websites, we provide many other services currently in demand within the digital world

View Sitemap >