Deciding on the right video dimensions to use for the web can be difficult.  Unfortunately, there is not a one fits all size because it depends largely on your target audience.  Usually, your best bet is to offer multiple sizes to ensure your video works for most of your website’s visitors.  Now that devices like the iPhone and iPod are gaining in popularity, you may want  to also offer a compatible size for these devices as well.  To make things even more complicated, your video sizes should be evenly divisible by 16 to ensure the best possible output.

The following frame sizes should work well for the large majority of websites whose visitors are on broadband connections.  If you need to target users on slower connections or other devices, you will need to create additional versions.   Since  most videos are either 16:9 (HD) or 4:3 (SD), I will provide dimensions based on both.  Keep in mind  that video does not scale up well to larger sizes, so if you source video is smaller than any of these sizes, you should only use the ones at the  same  sizes or smaller.

16:9 HD

1280×720 – iPad compatible*

512 x 288 – iPhone/iPod Touch compatible*

256×144 – If you do not need to support users with connections lower than 1mbps, you can omit this option.

4:3 SD

1024×768 – iPad compatible*

640×480 - iPhone/iPod Touch compatible*

320×240 - If you do not need to support users with connections lower than 1mbps, you can omit this option.

Note about SD video:  If your source video is NTSC/DV, you should scale non-uniformly to 640×480/320×240 since the pixel aspect ratio of NTSC/DV is not designed for computer monitors.

* iPad/iPhone/iPod Touch compatible resolutions also require special encoding settings and a compatible video player to work correctly.

If you have any questions about these dimensions or need recommendations for your unique circumstances, please be sure to post in the  comments!

In this Adobe Max 2009 presentation, video expert Robert Reinhardt discusses the tools and techniques used to deliver compelling HD video experiences on the web. Topics covered include how to leverage the Adobe Flash platform, HD video encoding considerations, and examples of websites that are using HD video effectively. Anyone interested in delivering HD video on the web will benefit from this presentation.

Watch the presentation on the Adobe Max website

Related posts

• 10 Expert Tips for Encoding Web Video Keep these tips handy for the next time you...
• Bigger and Better: Encoding for YouTube 720p HD When I wrote my first YouTube post 4 months...

Have you ever thought about starting your own Video Blog? Video is taking the internets by storm, but video blogging is still just a small niche. With inexpensive equipment and software, free distribution channels like Vimeo and YouTube and tons of online resources, there has never been a better time to get started in video blogging.

Mashable just published a informative guide by Leah Betancourt that explains video blogging and how to create and distribute your own video blog.

Mashable: The complete guide to video blogging

For more information about video blogging, here are some noteworthy resources:

• http://www.freevlog.org/
• How to start a video blog – the definitive guide

Watch this Adobe Max 2009 presentation by video encoding expert Fabio Sonnati on encoding best practices for H.264 video.  Learn the secrets of H.264 video encoding and how to leverage your encoding software to encode high quality video for the web.

You can view a PDF of the presentation slides here

Fabio’s  Flash Video Encoding Blog

Related posts

• 10 Expert Tips for Encoding Web Video Keep these tips handy for the next time you...
• HD Video Experiences on the Web In this Adobe Max 2009 presentation, video expert Robert...

YouTube Video Formats

Different formats are created depending on the dimensions of your source videos.   Here is a comparison of what versions you can expect when you upload your videos.  Other formats may be created as well, but at the time of this post, these are the ones you are most likely to encounter.  Once you upload your video and wait for all the versions  to be encoded, you can force YouTube to show you the different versions by appending fmt= and the format number.  (http://www.youtube.com/watch?v=Vf_PtJeTbuI&fmt=22)  The technique for embedding players with different formats is explained further in this post.

High Definition (16:9)  e.g.  Upload a 1280×720 or 1920×1080 video

• fmt=0 (Default low quality version)
  Video:  320×180 H.263 (Sorenson Spark) FLV Approx. 330 Kbps
  Audio:  MP3 Approx. 64Kbps 22KHz MONO
• fmt=6  (Higher quality FLV version)
  Video:  480×270 H.263 (Sorenson Spark) FLV Approx. 800 Kbps
  Audio:  MP3 Approx. 96Kbps 44.1KHz MONO CBR
• fmt=18 (High quality MP4)
  Video: 480×270 AVC H.264 MP4 Approx. 500 Kbps VBR
  Audio: AAC Approx. 128Kbps 44.1KHz Stereo VBR
• fmt=22 (Highest quality MP4)
  Video: 1280×720 H.264 MP4 Approx. 2Mbps VBR
  Audio: AAC Approx. 254Kbps Stereo VBR

Notes:
The full HD fmt=22 version is one of the best video formats seen on the web.  Unfortunately YouTube does not have a option to display it at the actual 1280×720 dimensions.

Standard Definition Widescreen (16:9)  e.g.  Upload a 480×270 video or any video that is 16:9 and less than 1280×720

• fmt=0 (Default low quality version)
  Video:  320×180 H.263 (Sorenson Spark) FLV Approx. 340 Kbps
  Audio:  MP3 Approx. 64Kbps 22KHz MONO
• fmt=6  (Higher quality FLV version)
  Video:  480×270 H.263 (Sorenson Spark) FLV Approx. 800 Kbps
  Audio:  MP3 Approx. 96Kbps 44.1KHz MONO CBR
• fmt=18 (Highest quality MP4)
  Video: 480×270 AVC H.264 MP4 Approx. 500 Kbps VBR
  Audio: AAC Approx. 128Kbps 44.1KHz Stereo VBR

Notes:
The 16:9 options are encoded at almost identical data rates to the 4:3 videos.  Again, I am surprised that they did not release a format at 640×360.
Standard Definition (4:3) e.g.  Upload a 640×480 video

• fmt=0 (Default low quality version)
  Video:  320×240 H.263 (Sorenson Spark) FLV Approx. 340 Kbps
  Audio:  MP3 Approx. 64Kbps 22KHz MONO
• fmt=6  (Higher quality FLV version)
  Video:  480×360 H.263 (Sorenson Spark) FLV Approx. 900 Kbps
  Audio:  MP3 Approx. 96Kbps 44.1KHz MONO CBR
• fmt=18 (Highest quality MP4)
  Video: 480×360 AVC H.264 MP4 Approx. 500 Kbps VBR
  Audio: AAC Approx. 128Kbps 44.1KHz Stereo VBR

Notes:
I am really surprised that they do not offer 640×480 version, especially now that they support HD sizes.  640×480 would be ideal for SD content on fast broadband connections.

How to set different YouTube formats in embedded players

If you have ever tried to embed a YouTube player to your site, you have noticed that even though they offer multiple size options, they only stream the low (fmt = 0) videos.   On the HD videos embedded players, they do offer a toggle for HD, but there is no option like this on the SD player and no guarantee that your site visitors will know it is there.

Fortunately, there is a easy work around so that you can embed videos on your site at any quality format (fmt) that your video has been encoded to.  Additionally, you can set the player frame size to match the encoded frame size of your video.

First, copy the embed code from the YouTube website.  It should look similar to the following snippet.

<object width=”640″ height=”385″>
<param name=”movie” value=”http://www.youtube.com/v/Vf_PtJeTbuI&hl=en&fs=1″>
</param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/Vf_PtJeTbuI&hl=en&fs=1” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”640″ height=”385″>
</embed>
</object>

In both places where it shows the URL to the video, you will need to replace the code “&hl=en&fs=1” with “&ap=%2526fmt%3D22” where the 22 at the end corresponds to the format number you want to display.  Here is what it would look like for all the different formats above:

http://www.youtube.com/v/Vf_PtJeTbuI&ap=%2526fmt%3D0

http://www.youtube.com/v/Vf_PtJeTbuI&ap=%2526fmt%3D6

http://www.youtube.com/v/Vf_PtJeTbuI&ap=%2526fmt%3D18

http://www.youtube.com/v/Vf_PtJeTbuI&ap=%2526fmt%3D22

For best results, you should set the width and height (both locations) to match the encoded width and height (+25 to the height in order to  account for the player controls) of the format number you choose.  For example, to display a full HD version (fmt=22) you will set the width and height to width=”1280″ and height=”745″ (720 + 25).  Here is a example of the embed code above modified to display the full HD version.  View Demo

<object width=”1280″ height=”745″>
<param name=”movie” value=”http://www.youtube.com/v/Vf_PtJeTbuI&ap=%2526fmt%3D22“>
</param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/Vf_PtJeTbuI&ap=%2526fmt%3D22” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”1280″ height=”745″>
</embed>
</object>

Download and inspect your videos

If you want to learn more about the various formats that YouTube encodes your videos to, you should download them and look at the specs.  Although YouTube has started putting dowload links on some videos, with the right tools you can download any format of any video quite easily.  There are many sites such as KeepVid (http://keepvid.com) that allow you to enter the YouTube URL and download, but I have found in my experience that they do not offer downloads for all the formats.

The best method I have found so far is by using the Firefox extension Download Helper (http://www.downloadhelper.net/).  Once installed you simply navigate to the video page you want to download, select the format and start the video.  Then the drop down will appear in your toolbar to be able to download.

Once downloaded, you can use the free open source VLC player (http://www.videolan.org/vlc/) to view either MP4 or FLV videos.  To view the specs for your videos I highly recommend the free open source MediaInfo tool (http://mediainfo.sourceforge.net/en).  MediaInfo tool  is amazing and will allow you to view everything from codecs to bitrates and other metadata available in your files.

Details from my fmt 22 YouTube HD Video

YouTube APIs and Tools

YouTube offers several APIs and tools you can use to further integrate YouTube’s content into your own website or application.   Basic tools include adding a YouTube search or video bar to your site in a few minutes without advanced web skills.

Search Bar Demo | Video Bar Demo

For developers looking to design their own embedded players in Flash or chromeless players controlled by JavaScript, the Player API has you covered.  The Data API allows developers using server-side programming advanced integration with virtually every aspect of YouTube, including uploading, searching, feeds, related videos ad more.  Full developer guides for different languages are provided.

The Getting Started Guide (http://code.google.com/apis/youtube/getting_started.html) is a great place to learn more about the available APIs and Tools.

The YouTube Community

If you have not been to the YouTube help forums (http://help.youtube.com/group/youtube-help?pli=1) ,  they offer a wealth of infomration and you should definitely check them out.  The Announcements forum will keep you up to date with the latest features added to the system and the “How do I…” section is good to find out more about issues you and other users may be experiencing and how to accomplish certain tasks within the system.    You can also post bugs and feature requests.

Related posts

• 10 Expert Tips for Encoding Web Video Keep these tips handy for the next time you...
• How To Encode Your Videos For YouTube’s New High Quality Option Now that YouTube has started offering higher quality videos,...

When I wrote my first YouTube post 4 months ago entitled “How to Encode Your Videos for YouTube’s New High Quality Option” , I would never have thought YouTube would make the move to HD resolution so quickly.  They went from a maximum resolution of 480×270 directly to 1280×720!  I’m sure this change has caught many off guard and everyone is now scrambling to get their videos converted to HD to take advantage of the awesome new quality settings being offered.  Many users that are new to HD or encoding for YouTube are probably wondering where to begin.   This guide will attempt to explain the new changes in detail and show you how to encode your videos for YouTube HD.

YouTube HD Specs

I downloaded a few YouTube HD videos (Using the Firefox extension DownloadHelper) and used MediaInfo to peek under the hood to find out all the juicy technical details.  I have seen many sites speculate on the data rates and resolution of the new format but few are reporting accurate information.

Video

• 1280×720 at 29.97 progressive (other framereates like 24, 25, 30 should work as well)
• H.264 codec in MP4 wrapper
• Variable bit rate averaging 2mpbs

Audio

• AAC
• 44.1 kHz Stereo
• Variable bit rate from averaging 100kbps – 256kbps

So yes, for everyone wondering, YouTube is really in HD.  Next I will show you how to encode your files…

Recommended Settings for Your Videos

If you haven’t read my previous post, please do so now.  This new guide will give you the settings to use, but will not go into the same level as detail as the previous guide.  Most of the basics about preparing your videos are the same and there is no need to repeat it here.  These instructions are only for 16:9 HD resolution videos.  If your videos are 4:3 Standard definition, the settings in the first guide still apply.  I do not recommend upscaling 480i/p videos to 720p.

Depending on the encoding software you use, certain settings may not be available.  If you are unsure of what to do, please post your question in the comments of this thread.   If you would like me to encode your file(s) or give you custom settings for your workflow, please contact me at webvideotechniques@gmail.com

Now open your favorite encoding software, import your source file and enter the following settings.

Video

• 1280×720
• 29.97 FPS Progressive (Note: use whatever frame rate your source file is set to.  As long as it is progressive it should be ok.)
• H.264 codec in MP4 wrapper (I recommend the Main Concept encoder if you have access to it, otherwise x264 will be fine)
• Set your data rate from 4000kbps to 8000kbps (Higher data rates in the source video will give the YouTube encoder more data to work with)
• Enable 2 pass VBR encoding if it is available

Audio

• AAC  (Use MP3 if AAC is not available)
• 44.1kHz Stereo
• 256kbps data rate

I have tested these settings using SUPER, Handbrake, Sorenson Squeeze and encoding directly from Sony Vegas.  I set all of the settings as close as possible and was able to get acceptable results from all of them (although there was some slight issues with each application which I will discuss in a later post).  My source file was a AVCHD 18mbps 1920×1080 30p file which I converted to a JPG 99% QuickTime video prior to encoding since AVCHD was not supported across the encoders.

These settings should produce a 10 minute file well under the 1GB upload limit.  The file I encoded was 43 seconds and the encoded filesize was anywhere from 39 – 43MB depending on which software I used.

I have attempted to embed the HD version of the video below.  If it does not show you the HD version,  go to the following URL and make sure you click the “Watch in HD” link at the bottom right under the video player.

http://www.youtube.com/watch?v=Vf_PtJeTbuI&fmt=22

Were you able to obtain great results with this guide?  Have a question about encoding or other video topic?  Please be sure to post your feedback in the comments.

Related posts

• How To Encode Your Videos For YouTube’s New High Quality Option Now that YouTube has started offering higher quality videos,...
• HD Video Experiences on the Web In this Adobe Max 2009 presentation, video expert Robert...

Now that YouTube has started offering higher quality videos, the old settings for encoding your videos should be tossed out the window. This tutorial will walk you through the steps required to encode your video for YouTube using the free SUPER Video Encoder . If you are using a professional software like Sorenson Squeeze or Apple Compressor, or even the inexpensive QuickTime Pro Player, many of the same settings will be available. Additionally, if your editing software supports H.264 (as either MP4 or MOV) encoding, you may be able to skip the reencoding process and export directly for upload to YouTube using the compression settings below. If you are unsure of the equivalent setting or would like me to include specific instructions for your application, please leave a note in the comments.

*******************************************

UPDATE 12/6/2008

If you are producing HD (16:9) videos for YouTube, you should refer to my latest post on how to encode for YouTube HD format located at:

http://webvideotechniques.com/123/bigger-and-better-encoding-for-youtube-hd

UPDATE 5/30/09

The default QuickTime H.264 export only supports up to 2Mbps as it uses the Baseline profile.  You may want to use SUPER, Handbrake or a professional encoding software like Squeeze or Episode Pro to compress your video.

This guide recommends SUPER, but I now prefer and recommend the free and open source encoder Handbrake (http://handbrake.fr/) 

This tutorial assumes that you already have edited your video and have exported to the highest quality possible.

Here are some tips for exporting from your NLE software before encoding:

• Export uncompressed video and audio as MOV or AVI
• Make sure your video is progressive/deinterlaced
• If your video is SD NTSC, then export as 640×480 (if you are using PAL you will need to crop first)
• If your video is 16:9 widescreen but  less than 1280×720, export as 640×360 (If your video is 1280×720 or above, then refer to the HD guide at http://webvideotechniques.com/123/bigger-and-better-encoding-for-youtube-hd)
• Use 44.1KHz Sample rate to avoid audio quality issues

The current high quality resolution on YouTube is 480×360 (4:3 SD) and 480×270 (16:9 Widescreen). During testing I found that uploading a 640×480 (4:3 SD) or 640×360 (16:9 Widescreen) produced a higher end data rate even though YouTube downsizes the resolution during encoding. Using the larger resolution (and data rate) source file also future-proofs your video if they decide to raise the quality level again in the future. That way you do not have to re-upload later if they change the size/quality. Now that they are allowing up to 1024MB (1GB) for uploads, there is plenty of room to go with the higher resolution version.

I downloaded a few of the new high quality videos and most have been approximately 400-500kbps Video and 120kbs for the audio, a nice bump up from the 250-350 combined data rates for the lower quality. One of the reasons that they look so good is due to the fact they are using the new H.264 codec in a MP4 wrapper for the video and AAC audio. The H.264 codec is the de facto standard for high quality video on the web today and the older Flash codecs Spark pro and On2 VP6 just can’t deliver the same quality level vs filesize at the same data rates.

Our goal is to upload the highest quality possible that will take full advantage of the current high quality video encoding as well as give us some headroom for future quality increases.

Enough with the details, just give me the encoding settings!

1. Open SUPER and import your source video. Make sure you do not change any default settings except for the ones noted below.
2. Set Output Container as: MP4
3. Set Output Video Codec as: H.264/AVC
4. Set Output Audio Codec as: AAC LC
5. Under Video Scale Size, check the More box and enter 640 : 480 (4:3) or 640 : 360 (16:9 widescreen)
6. Set Aspect to 4:3 for SD or 16:9 for HD/Widescreen
7. Set Frames per Second to match the fps of your source video  (Note: As long as your Source is progressive, you can use virtually any frame rate 24, 25,30, etc.)
8. For Bitrate kbps, choose 4080
9. IMPORTANT: Depending on the amount of movement and color in your video, you may need to raise the bitrate. During testing using a clip with a lot of motion, 4080 provided the best end results. If the video you export has blocks or artifacts, then you may try raising the bitrate to 5000kbps.
10. Make sure “Hi Quality” selected BUT NOT “Top Quality”
11. Uncheck 48k Audio
12. Select a Sample Rate of 44100
13. Set the channels to 2
14. For Bitrate kbps, select 256
15. Click the encode button to encode your video

Below is a screenshot of the SUPER interface with all of the correct settings:

Here is the equivalent settings in Sorenson Squeeze 5:

With the video that I used for this tutorial, I found that if I uploaded a video that was less than 4080kbps, then the end bitrate after YouTube encoded it was lower and if I raised the bitrate to higher than 4080kbps, then the end bitrate was the same as it was when I used 4080kbps.

Here are some details from my tests:

640×360 @ 3000kbps, end result was 480×270 @ 439kbps
640×360 @ 4000kbps, end result was 480×270 @ 501kbps (Sweet spot)
640×360 @ 5000kbps, end result was 480×270 @ 501kbps

For audio, the bitrate capped out at 124kbps.

Here is the final video (High Quality version) on YouTube (http://youtube.com/watch?v=ePOV7CWpLSA&fmt=18)

(Special Thanks to My Digital Life for the tip on how to get the embed code to show the high quality version)

If you have any questions or tips for encoding high quality You Tube videos, please post in the comments. Also, if you used these settings to encode your video(s) for YouTube, post links to your videos.

Related posts

• Bigger and Better: Encoding for YouTube 720p HD When I wrote my first YouTube post 4 months...
• 10 Expert Tips for Encoding Web Video Keep these tips handy for the next time you...

Scott Kirsner of CinemaTech has compiled a cool list of sites where filmmakers and video producers can get paid for their video productions.  His list includes the companies names and web addresses, subject matter, length restrictions, details about how you get paid, and notes about each opportunity.  He collected all of this info between 2005 and 2007 for part of his recently publisted book, The Future of Web Video: New Opportunities for Producers, Entrepreneurs, Media Companies and Advertisers. 

There are quite a few recognizable names like YouTube and Blip.tv, but most of them I had never heard of including Break.com,  ExpertVillage.com, Jaman and more. Although some of the information is out of date considering how fast things change on the web, most of the sites listed are still active.  In addition to online distribution, Scott also lists some sites that offer DVD Burning and DVD Merchandising services. If you produce web video and would like to look into ways you can get paid for your work, then this list is a great starting point.  Be sure to check out his book as well.

http://www.scottkirsner.com/webvid/gettingpaid.htm

Do you know of any other ways to make money on your web videos or tried any of the services in the list?  Be sure to post your feedback in the comments!

TechCrunch has posted a short (but sweet) primer on the tools you need to get started in the online video world including recording, streaming and distribution advice. They review several live streaming options and cover some of the technical aspects of online distribution. Online media expert Chris Pirillo shares some pro tips as well.

If you are looking to start a career as a video blogger or just looking learn more about live streaming services and web video distribution be sure to check it out.

Tools For Your Video Career via TechCrunch

Keep these tips handy for the next time you encode video.

1. Deinterlace your source video
2. Choose a frame size where the width and height are evenly divisible by 16
3. Maintain the aspect ratio of your source video
4. Crop any empty space (like letter boxing) and crop/scale to remove edge jaggies around your video
5. Select bitrates that are appropriate for your target audience
6. Export your source video from your editing software at the highest quality possible prior to encoding
7. If your encoding tool offers 2-pass encoding, use it!
8. Use VBR (Variable Bit Rate) for Progressive Download and CBR (Constant Bit Rate) for RTSP Delivery
9. The square pixel equivalent to 720×480 is 640×480, HD 1920×1080 is already in square pixels
10. Export a short segment of your source video and do multiple test encodes to save time until you find the perfect settings

Related posts

• Encoding Best Practices for H.264 Video by Fabio Sonnati Watch this Adobe Max 2009 presentation by video encoding...
• HD Video Experiences on the Web In this Adobe Max 2009 presentation, video expert Robert...