How to Embed High Quality and Higher Resolution YouTube Videos on Blog or Website

Viewers can now opt to view YouTube video clips in higher quality, or even set YouTube to playback the video in high resolution quality mode automatically by default whenever the video is watched on YouTube website. However, for YouTube video clip which embedded on blog or web page, viewers won’t have such flexibility to switch or upgrade the video playback to higher quality streaming, unless webmaster or blogger specifically embed a high quality and high resolution YouTube embed code on the website.

To allow visitors to web pages embedded with YouTube video clip to view and watch the video in high quality mode, webmaster has to use the hack below to embed the code that will stream from high quality video source, which stream as a MP4 (H264 with AAC audio) and encoded at 480×360. Similar to the hack to view high quality video on YouTube with &fmt=18 or &fmt=6 switch, publisher needs to append a switch to the YouTube embed code so that the Flash Player knows that it should play the video with high quality video streaming.

What’s the different between normal quality and high quality YouTube videos? Take a look at the 2 embedded YouTube video clips below, featuring sexy Mariah Carey singing Touch My Body, and you would amazed.


Normal quality version of YouTube video


High quality version of YouTube video

However, the default “&fmt=18″ flag for URL address bar will not work on embed code. In YouTube embed code, add and append &ap=%2526fmt%3D18 to the end of video clip’s URL specified in “param value” and “embed src”. For example, for video above, the embed code will be as below:

<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/_w0AwGCjqnw&hl=en&rel=0″></param><embed src=”http://www.youtube.com/v/_w0AwGCjqnw&hl=en&rel=0″ type=”application/x-shockwave-flash” width=”425″ height=”344″></embed></object>

Apend the &ap=%2526fmt%3D18 to the end of two instances of http://www.youtube.com/v/xxxxxxxxxxx&hl=en&rel=0 within the original quotation mark, where xxxxxxxxxxx represents the unique video ID. The high quality YouTube embed looks like below:

<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/_w0AwGCjqnw&hl=en&rel=0&ap=%2526fmt%3D18″></param><embed src=”http://www.youtube.com/v/_w0AwGCjqnw&hl=en&rel=0&ap=%2526fmt%3D18″ type=”application/x-shockwave-flash” width=”425″ height=”344″></embed></object>

The best part of high quality video can be enlarged to the width of 480 with affecting the viewing quality as the streaming video is encoded in 480×360 resolution.

With HD era arriving, YouTube now supports playback of YouTube hosted video in 720p HD (High Definition) picture quality resolution in near CD audio quality. Here’s how to embed video on external third party websites or blogs to play YouTube in 720p resolution or embed video to play in HD by default.

68 Responses to “How to Embed High Quality and Higher Resolution YouTube Videos on Blog or Website”

Pages: [3] 2 1 » Show All

  1. Youtube HQ nel nostro blog | Cirillina - Programmi gratis, Blog, Tecnologia, Web 2.0
    October 21st, 2009 16:36
    68

    [...] al momento non è possibile fare è integrare nei nostri blog i video HQ. Navigando ho trovato un sito in inglese che spiega come è possibile  fare questo e integrare nelle nostre pagine i filmati [...]

  2. Dragon Blogger
    August 13th, 2009 13:48
    67

    Really good tip, I use this often even on regular quality video’s as it makes them a little clearer

  3. chet
    June 14th, 2009 14:56
    66

    Since a few days the hack doesn’t work anymore
    &ap=%2526fmt%3D18
    This is the answer from youtube

    YouTube has recently been upgrading. Here’s a statement in the uploads section of their “known Issues” website.

    “HQ disappearing / not available for videos that meet HQ standards

    We made improvements to standard quality for video uploads! Unless there is a large difference between standard quality and HQ , the upload will produce standard quality by default (and not HQ as before).”

    http://www.google.com/support/forum/p/youtube/thread?tid=391cfb2db6b3b17b&hl=en

    Anyone knows an updated hack ??

  4. Setiadi
    May 2nd, 2009 17:53
    65

    Cool..The embedded code works for my website and some friends told me that I have a different quality videos (means good quality, off course..)

    Thanks

  5. Video Blogger
    April 8th, 2009 00:18
    64

    I’d been searching all over for this, no one could tell me. I just added this to my videos and it worked.

    I was using vimeo for a long time because of this, still uploading to youtube, now I can use youtube videos on my site and not sacrifice the quality.

    Thanks a bunch!

  6. best videos in the world
    April 3rd, 2009 08:11
    63

    hey, a couple of things:

    1) The only problem I have with HQ embedding is that the little icon in the video doesn’t actually show that it is HQ or HD, which i just annoying, because visitors will always hit the button for better quality, not realizing that it doesn’t do anything. Does anyone know if there is a way to get around this???

    2) the videos in this post are dead.

    Thanks guys!

  7. Įterpkite aukštos kokybės YouTube klipus « Entellbox Blogas
    March 16th, 2009 18:28
    62

    [...] Šaltinis: My Digital Life [...]

  8. lilian
    March 11th, 2009 06:55
    61

    Is it possible to embed high quality video with YouTube Custom Player, especially that layout with many small screens display on the side? Its video ID# goes like this: =”http://www.youtube.com/cp/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=” I tried to append &ap=%2526fmt%3D18 to the end of the video ID# within the original quotation mark (as you have suggested above)but it doesn’t work. Please HELP! Thank you in advance.

  9. Dessa
    March 9th, 2009 10:33
    60

    Thanks! This worked! :D

  10. Dragon Blogger
    February 19th, 2009 07:27
    59

    Thanks for this post, it helped me embed high quality videos from youtube on my blogs.

  11. From YouTube HQ: HQ Video Embeds | Viral Video Maker
    February 17th, 2009 20:47
    58

    [...] video playback on its embeds. Previously, you could switch to the high-quality stream by hacking the embed code, but now YouTube provides a handy-dandy little “HQ” button in the lower-right pop-up [...]

  12. Bonus Bill
    February 7th, 2009 07:00
    57

    This is really useful, thanks a lot for the tip – the videos in low quality just look so bad, but this makes all the difference

  13. Carrie
    February 6th, 2009 14:53
    56

    Great ! I will add this to my bookmarks. TY

  14. Tim Davis
    February 3rd, 2009 07:15
    55

    Hey, thanks for the code. I couldn’t figure it out on the embed code, until I used the &ap=%2526fmt%3D18 . That helped me out, and I couldn’t find it anywhere else. Have a great day.

  15. Alex
    February 1st, 2009 20:40
    54

    Thanks for providing this tip. Works great!

  16. How to Integrate Social Media into Product Marketing « I’m Not Actually a Geek
    January 27th, 2009 23:12
    53

    [...] page or blog post, you can alter the embed code to force the video to view in high resolution. The hack described in this blog post works. It will ensure that the video’s fidelity is much higher, making it a more enjoyable [...]

  17. FanTrust » Blog Archive » From YouTube HQ: HQ Video Embeds [NewTeeVee]
    January 27th, 2009 02:00
    52

    [...] video playback on its embeds. Previously, you could switch to the high-quality stream by hacking the embed code, but now YouTube provides a handy-dandy little “HQ” button in the lower-right pop-up menu. [...]

  18. From YouTube HQ: HQ Video Embeds « NewTeeVee
    January 24th, 2009 07:30
    51

    [...] video playback on its embeds. Previously, you could switch to the high-quality stream by hacking the embed code, but now YouTube provides a handy-dandy little “HQ” button in the lower-right pop-up [...]

Pages: [3] 2 1 » Show All

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to comments feature has been disabled. To receive notification of latest comments posted, subscribe to My Digital Life Comments RSS feed or register to receive new comments in daily email digest.

New Articles

Incoming Search Terms for the Article

youtube embed hq - youtube high quality - embed hq youtube - youtube embed high quality - embed high quality youtube - youtube hq - high quality youtube - embed youtube high quality - youtube hd code - embed youtube hq - youtube high quality code - youtube hq code - how to add hq on youtube - embed youtube - how to embed high quality youtube - high quality videos - youtube embed - hq embed youtube - youtube hq embed - download youtube high quality - high quality youtube embed - high quality on youtube - add hq to youtube - youtube hq url - embedded youtube - upload youtube hq - youtube hq resolution - youtube how embed hq - youtube embed code - youtube embed parameters - youtube force HQ - how to embed hq youtube - youtube high quality embed code - embedded with youtube - HQ video - youtube embed hd default - start youtube video in high quality - embed hq videos - high quality embed youtube - HQ youtube - embed HQ youtube video - youtube embed quality - embed youtube video hq - embed youtube video size - how to hq youtube - embed high quality - embed youtube in high quality - youtube hd codes - high quality video - www.youtube.com -