Sunday, December 7, 2008

Embedding high quality version of YouTube videos...

Unfortunately, if you click through to YouTube on either the embedded 'normal quality' or the embedded 'high quality' of the videos, you end up on the default 'normal quality' view. So you'll need to also include the URL alongside the video that will force the 'high quality' view if the viewer wants to view on YouTube rather than embedded in your page. That includes adding the following code to the end of the default URL as shown below: &fmt=6 or &fmt=18 or &fmt=22 for the 720p HD versions.. again, this only works if the video was originally uploaded to YouTube in HD.
Cnet News has a great article on displaying the 720p HD version:

So, looking at some of the hacks around the web, such as Downloadsquad, for embedding YouTube high quality videos into third party sites... here goes...
Some Notes: Not all videos have been uploaded in higher quality, so this only works if there is already a 'high quality' link below the video.

Default normal (means LOW) quality URL on YouTube: http://www.youtube.com/watch?v=fiXymVmpvK0
High Quality URL: http://www.youtube.com/watch?v=fiXymVmpvK0&fmt=6 or http://www.youtube.com/watch?v=fiXymVmpvK0&fmt=18
Machinima title: Infolit iSchool in Second Life®

Using my example, Downloadsquad's instructions state to add the following code to the end of the URLs: &ap=%2526fmt%3D18

Unfortunately, if you click through to YouTube on any of the videos, you end up on the default 'normal quality' view. So you'll need to include the URL that will force the 'high quality' view. That includes adding the following code to the end of the default URL as shown below:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/fiXymVmpvK0&ap=%2526fmt%3D18"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fiXymVmpvK0&ap=%2526fmt%3D18" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>


Thanks for the reminding me how to display the HTML code, Felgall


View the 'high quality' version on YouTube:
So, Here goes for embedding the 'high quality' video:


And here is the 'normal quality' default version:



Adding the following code to the end of the 'actual' URL... from the YouTube web page... don't include all the other stuff that gets tagged on when you just copy the embed code from YouTube:
&ap=%2526fmt%3D22

Using the source code from Cnet News for displaying the 720p HD version:


<object width="630" height="380">

<param value="http://www.youtube.com/v/optUdhi_Ujg&hl&amp;ap=%2526fmt%3D22" name="movie" /><param value="window" name="wmode" />

<param value="true" name="allowFullScreen" /><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/optUdhi_Ujg&hl&amp;ap=%2526fmt%3D22"></embed></object>




And this is the embed code taken from YouTube with the URLs edited... no more

take the default URL and add the code to it: &ap=%2526fmt%3D22

<object width="630" height="380"><param name="movie" value="http://www.youtube.com/v/optUdhi_Ujg&hl&amp;ap=%2526fmt%3D22"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/optUdhi_Ujg&hl&amp;ap=%2526fmt%3D22" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="630" height="380"></embed></object>

No comments: