Embed high-res Youtube videos

Here's an example of a normal embedded Youtube video, borrowed from Patti Schiendelman's Gakken Mechamo Inchworm post.

Back in march, it was discovered that when you view a video directly on Youtube, you could add a "&fmt=18" to the URL to enable a higher quality, higher resolution stream which is encoded with the H.264 codec.

To make this work in an embedded video, however, you need a slightly different hack. After pasting the embed code into a blog post, adjust the two video URLs (one in a param tag and one as the src parameter in the embed tag) by adding "&ap=%2526fmt%3D18" to the end.

For example, the above video embed becomes:

<object width="600" height="475"><param name="movie" value="http://www.youtube.com/v/iMQBKkDJY2c&hl=en&fs=1&rel=0&ap=%2526fmt%3D18"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/iMQBKkDJY2c&hl=en&fs=1&rel=0&ap=%2526fmt%3D18" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="475"></embed></object>

And here's the result:

The still frame before the video is played is the exact same over-compressed image, but when a user clicks play, they will get a nice surprise. Instead of 320x240 video encoded with the Sorenson codec, the video will come in at a resolution of 480x360, encoded with the superior H.264 codec.

Embedding High Quality Youtube Videos [via Kottke]
View YouTube in high-res


Recent Entries

Comments

Oldest comments listed first.

Posted by: Patti Schiendelman on November 14, 2008 at 8:06 AM

Aha! Thanks for posting this, Jason; adding the high quality code to the url is easy, adding to the embed is trickier.


Posted by: Dolnor on November 16, 2008 at 3:15 PM

Add "&ap=%2526fmt%3D18#" to any direct link to switch to high-def version.


Posted by: Christian on November 24, 2008 at 5:34 AM

web editor

Has anybody noticed that the nice snippet of code &ap=%2526fmt%3D18 doesn't work in Internet Explorer anymore?

Any tips on a fix?

You may test it yourself (on your own websites or on http://blog.makezine.com/archive/2008/11/embed_highres_youtube_vid.html)


Posted by: dave on December 13, 2008 at 2:18 PM

&ap=%2526fmt%3D18 doesn't work in Internet Explorer

Yes, I noticed that &ap=%2526fmt%3D18 doesn't work in Internet Explorer . More exactly, my customer notice and called me -- pretty fookin irate they were.

Why can't Billy Gates get along with the other children?


Leave a comment


Subscribe to MAKE!Subscribe to MAKE Magazine!

Subscribe today, save 42% and get web access to MAKE free. MAKE Digital Edition is available only to subscribers.

$34.95 / 1 year
(4 Quarterly Issues)

Subscribe now


Void your warranty, violate a user agreement, fry a circuit, blow a fuse, poke an eye out. Make: The risk-takers, the doers, the makers of things... Welcome to Make: Online!


CRAFT Maker Shed Maker Faire MAKE television




Check out more videos from MAKE.

Maker SHED

Connect with MAKE

Be a MAKE fan on Facebook MAKE on Facebook
Visit our Facebook page and become a fan of MAKE!
MAKE on Twitter MAKE on Twitter
Follow our MAKE tweets!
MAKE Flickr Pool MAKE on Flickr
Join our MAKE Flickr Pool!
    make_tips on Twitter



    MAKE Archives

    Make: Money

    Make: Science Room
    Subscribe to MAKE Magazine!

    Make: Online editors and authors!

    Gareth BranwynGareth Branwyn
    Editor-in-Chief


    Phillip TorronePhillip Torrone
    Senior Editor
    | Web | Twitter


    Becky SternBecky Stern
    Associate Editor
    | AIM | Twitter


    Marc de VinckMarc de Vinck
    Contributing Writer
    | AIM | Twitter


    John ParkJohn Park
    Contributing Writer
    | Twitter


    Sean RaganSean Ragan
    Contributing Writer
    | Twitter


    Matt MetsMatt Mets
    Contributing Writer
    | AIM | Twitter


    Dale DoughertyDale Dougherty
    Editor & Publisher
    | Twitter


    Shawn ConnallyShawn Connally
    Managing Editor
    | Twitter


    Goli MohammadiGoli Mohammadi
    Associate Managing Editor

    Kip KayKip Kay
    Weekend Projects
    | AIM | Twitter


    Collin CunninghamCollin Cunningham
    Contributing Writer
    | AIM | Twitter

    Adam FlahertyAdam Flaherty
    Contributing Writer
    | AIM | Twitter


    John BaichtalJohn Baichtal
    Contributing Writer
    | AIM | Twitter



    More contributors: Mark Frauenfelder (Editor-in-Chief, MAKE magazine), Kipp Bradford (Technical Consultant/Writer), Chris Connors (Education), Diana Eng (Guest Author), Peter Horvath (Intern), Brian Jepson (O'Reilly Media), Robert Bruce Thompson (Science Room)

    Suggest a Site!

    Advertise here with FM.

    Why advertise on MAKE?
    Read what folks are saying about us!

    Click here to advertise on MAKE!



    Current Podcast

    itunesdl.gif Behind the Scenes at MAKE and CRAFT In January, many of the remote MAKE/CRAFT team members (myself included) convened at the Maker Media headquarters at O'Reilly Media in Sebastopol, California. Take a look behind the scenes of your favorite DIY publications as Goli Mohammadi gives us... More...

    Get the Make: Online sent via email
    Enter your email to receive Make: Online each day:



    Sign up for the Make: Newsletter

    Our Make: Newsletter covers news from maker Media, has original columns, Shed deals, and more! You can also read the archives of past issues.


     



    MAKE Fascination video series brought to you by Dow

    Make: Education
    MAKE: en EspaƱol MAKE: Japan
    Important please read


    Subscribe to MAKE Magazine!

    Recent Posts from the Craft: Blog