Embed High Quality YouTube video

1. Create a YouTube account
2. Upload a video to that account
3. Navigate to the video on YouTube - in this case, we'll use our re:Source trailer which can be found on YouTube here: http://youtube.com/watch?v=qSEH5_TS-Sw
4. To the right of the video there is a field with the Embed code in it. Copy that code on your clipboard.
5. Open up your HTML document for your website, or make sure that you are editing the HTML for your blog, and paste that code. For me, that embed code looks like this:
   
   <object height="344" width="425"><param name="movie" value="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en"><embed src="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en" type="application/x-shockwave-flash" height="344" width="425"></embed></object>

Once you publish this embed code, you should have a video on your page that looks something like the video below:



Success! We've got the video in there. Now onto the important part - how do we make it look better?

Well I happen to know that we shoot re:Source in 1920x1080 high-definition, and we export it using a high quality codec so that it looks great on the web. Hardly the same thing that we are looking at above. So here are two tips to make sure that the video plays in high quality and the proper aspect ratio.

1. Change the width and height numbers in the embed code to match the width and height of the source video that you originally uploaded to YouTube. In our case, the source video was 640 (width) x 360 (height). I'll adjust the height a few pixels more to adjust for the player controls and come up with the following code:
   
   <object height="385" width="640"><param name="movie" value="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en"><embed src="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en" type="application/x-shockwave-flash" height="385" width="640"></embed></object>


2. To force YouTube to serve the high quality source video, you need to add the following snippet of code to the URLs listed in the embed code: &ap=%2526fmt%3D18


3. Once doing that, my source embed code now looks like this:
   
   <object height="385" width="640"><param name="movie" value="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en&amp;ap=%2526fmt%3D18"><embed src="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en&amp;ap=%2526fmt%3D18" type="application/x-shockwave-flash" height="385" width="640"></embed></object>


4. Paste that code back into the HTML document or into my blog and now I will see this much better version of my video