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.
Related Articles
- Force YouTube to Automatically Play Videos in Higher Quality Resolution Mode by Default
- How to Embed and Play 720p HD (High Definition) YouTube Videos (&fmt=22 Code Hack)
- Embed YouTube HD Video to AutoPlay in High Definition Code Trick
- Download Free authorSTREAM Desktop To Embed YouTube Videos to PowerPoint Slides
- Upgrade Video Quality When Viewing YouTube
- Download Free Video Downloader To Download High Defination (HD) Videos From YouTube and Wrzuta
- YouTube Allows You to Start Playing Embed Video at Specific Start Time
- Download YouTube Uploader To Upload Multiple Videos on YouTube
- Enable 3D Player In YouTube Videos Via YouTube 3D Video Tags
- Youtube To Launch HD Videos Soon
Entries (RSS)
October 25th, 2008 00:29
[...] FU**ING Youtube Guys, this is what you wanted originally right? How to Embed High Quality and Higher Resolution YouTube Videos on Blog or Website My Digital Life [...]
October 21st, 2008 03:00
[...] How to Embed High Quality and Higher Resolution YouTube Videos on Blog or Website » My Digital Life [...]
October 17th, 2008 23:40
Thanks for the ‘thank you’s’ guys
Have you tried the video encoder yet? It’s totally free and will encode to H.264 (X264) format for you, easily. I’ve put up some videos about it.
Later,
Mark
October 17th, 2008 22:04
Thanks so much for the youtube tweak. It was just the the thing that was needed.
October 16th, 2008 01:28
Awesome tip; it really makes a difference on embedded vids. Thanks!
October 14th, 2008 04:55
[...] Auflockerung einfach mal ein kleines Video (hab bei allen Videos in diesem Beitrag übrigens den “&ap=%2526fmt%3D18″-Trick benutzt, um das Video in höherer Qualität einzubinden, [...]
October 8th, 2008 23:21
[...] How To Embed High Quality Videos from YouTube [...]
October 6th, 2008 22:02
Thank you very very much for that.
October 2nd, 2008 04:47
I am not trying to plug here but I was having trouble working out how to watch, create and embed high quality video in Youtube. I found out the easist ways and have recently put up a website that explains it all.
The site is totally free. I have even included a script that generates the high quality embed code for you with different options. So it’s even easier.
You can take a look at:
It’s free and I’m trying to help the guys that don’t know or make it easier for the guys that do. Thanks, Mark
http://www.youtubehq.info
September 27th, 2008 05:55
This high quality script works fine in IE but fails to load the video using Firefox.
I use a combination of high quality and autoplay in both script locations as follows:
&ap=%2526fmt%3D18&autoplay=1
Here is the Firefox issue:
Using autoplay=1 in both locations along with the high quality script included in the first instance only and omitted from the second instance, the low quality video plays fine. However if I add the high quality script to the second instance, Firefox stalls, It appears to be continuously downloading with the following comment in the status bar:
Transferring data from 208.117.253.83… (example, IP address varies)
Note, the low quality version downloads from:
v23.cache.googlevideo.com… so it appears the redirect to the HQ version is functioning OK.
I cleared the browser cache after each test to make sure Firefox wasn’t loading the web page from cache.
As per previous comment, this seems to be a Firefox issue as high quality functions great using IE6.
Has anybody else experienced this when using Firefox and if so, is there a known workaround????
Thanks.
September 26th, 2008 03:44
I think Google fixed all of this…. I think.
The new blogger just got a much needed update/upgrade(?) and now when you build and edit a new blog you will find a ton of built in “widgets” or “gadgets” or whatever you like to call them.
One of which is a YouTube player. This player works on every system I testing it on.. iPhone, Firefox (mac & PC), Chrome, and IE.
The only thing is.. I’m not sure if it’s that high quality player or just the same loFi stream from before.
Point being.. Google owns/is YouTube so I imagine this might be the place for the answer. Let me repeat.. these were the only YouTube player codes that I could see on every browser and on my iPhone.*
*And the best part is.. when you press play on the video box from one of these Google charged players it opens the thing in the phones native YouTube player. Then it can be bookmarked, added to the home screen, or sent to a “friend”.
Pretty damn clever!
Now what about that HQ embed issue. Go experiment with it and report your results. The future of respectable quality video depends on nerds like us.
September 11th, 2008 20:02
[...] Wie binde ich ein Youtube Video mit höherer Qualität ins Blog ein? Eine genaue Beschreibung gibt es bei My Digital Life. [...]
September 5th, 2008 13:23
“&ap=%2526fmt%3D18″ is very helpfull. Thanx for that!
but i have the same question like JumpOff:
How can i embed high quality and higher resolution youtube videos as a PLAYLIST ?
I tried “&ap=%2526fmt%3D18″ with a playlist like
http://www.youtube.com/view_play_list?p=9B94127A49514758 ?
but it doesn´t work.
August 29th, 2008 03:33
this is amazingly helpful and simple. thanks!
your mariah video is dead, you can use our hula video in its place if you like!
August 26th, 2008 21:02
Okay, have used this a lot now… but is there a way to force High Quality on embedded LATEST VIDEO players like this one: http://www.charliesloth.com
I also tried the FULL SCREEN code but it too doesn’t work on these bespoke players. Any advice?
August 26th, 2008 10:40
What a great post. Thanks!
August 7th, 2008 02:09
Thanks for the code. Worked like a charm!!
August 4th, 2008 06:22
This is great u was wondering how to embed with the high definition
July 22nd, 2008 05:15
Yoram, you’re the first guy that managed to get an AVI from Youtube. This is about embedding YouTube Flash-video. Not AVI’s.
July 22nd, 2008 05:14
You’re da man!
Thanks!
July 20th, 2008 05:44
hi,
i try the “&ap=%2526fmt%3D18″ code and it doesn’t work,
my video is a avi type,
there is a different code for avi???
thanks in advance.
July 18th, 2008 23:25
That was EXACTLY what I was looking for!!!! Now to figure out where the FULL SCREEN option has gone when I embed!!
July 4th, 2008 02:04
Excellent Post my friend!! It was so easy!
June 20th, 2008 05:42
[...] How to Embed High Quality and Higher Resolution YouTube Videos on Blog or Website [...]
June 13th, 2008 20:17
[...] Via | Mydigitallife [...]