Archive
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
This post is archived and may contain outdated information. It has been set to 'noindex' and should stop showing up in search results.
Embedding YouTube Videos in HD
Dec 6, 2011Web and InternetComments (0)
Note: With YouTube's update in 2013, the contents of this post may no longer be accurate.
This is a follow-up to my post on linking to and embedding HD YouTube videos. It goes more into depth on how video resolution affects the default playback quality, as well as the differences between the two new embedded players.
You may have noticed that YouTube has two embed players for the new embed code (version 3 of the player). There is a player with controls that fade away, leaving only a 3-pixel tall track position bar along the bottom, and a player with fixed, 30-pixel tall controls that do not fade away.
Here's how you can affect which player loads: If the width and height in your embed code are even multiples of either 16 x 9 or 4 x 3, the player with fade-away controls will load; otherwise, the player with the fixed controls will load. Apparently YouTube has no love for us 16 x 10 users. :(
Go ahead and try it. Embed a 16 x 9 video at 640 x 360. The controls will fade away when the video is playing. Now change the width and height of the embed code to 640 x 390. The controls will be fixed. Cleverly, you'll notice that because the controls are 30 pixels tall, and 390 minus 30 is 360, the video itself won't be smaller.
So what happens if you choose an oddball custom resolution, such as 900 x 400? YouTube has a range of vertical resolutions for each quality setting, and the range depends on if the player is the fade-away controls one or the fixed controls one. 900 x 400 will have fixed controls, and falls into the 360p range. Here are the complete ranges for each quality setting, and remember that these refer to the vertical resolution of the video itself, and not the height of the player:
Fixed controls player:
Fade-away controls player (for 16 x 9 videos):
For example, embed a video at 800 x 450. That is an even increment of 16 x 9, so the player that loads will have fade-away controls and the default playback quality will be 360p. Now change the embed code width and height to 800 x 480. The player with fixed controls will load and the default playback quality with be 480p. In both cases, the video is 800 x 450 in resolution, but depending on the player that it uses, it will default to either 360p or 480p.
Of the four resolution options YouTube shows you on the embed dialog (for 16 x 9 videos), 853 x 480 is the only one that doesn't load in the player with the fade-away controls. This is because 16 x 9 does not go into 853 x 480 evenly. So you'll notice that there will be black bars on the sides of the 16 x 9 video. To actually play an 853 x 480 video in an embedded YouTube player, you'll want to choose 853 x 510 as the width and height in the embed code.
This is a follow-up to my post on linking to and embedding HD YouTube videos. It goes more into depth on how video resolution affects the default playback quality, as well as the differences between the two new embedded players.
You may have noticed that YouTube has two embed players for the new embed code (version 3 of the player). There is a player with controls that fade away, leaving only a 3-pixel tall track position bar along the bottom, and a player with fixed, 30-pixel tall controls that do not fade away.
Here's how you can affect which player loads: If the width and height in your embed code are even multiples of either 16 x 9 or 4 x 3, the player with fade-away controls will load; otherwise, the player with the fixed controls will load. Apparently YouTube has no love for us 16 x 10 users. :(
Go ahead and try it. Embed a 16 x 9 video at 640 x 360. The controls will fade away when the video is playing. Now change the width and height of the embed code to 640 x 390. The controls will be fixed. Cleverly, you'll notice that because the controls are 30 pixels tall, and 390 minus 30 is 360, the video itself won't be smaller.
So what happens if you choose an oddball custom resolution, such as 900 x 400? YouTube has a range of vertical resolutions for each quality setting, and the range depends on if the player is the fade-away controls one or the fixed controls one. 900 x 400 will have fixed controls, and falls into the 360p range. Here are the complete ranges for each quality setting, and remember that these refer to the vertical resolution of the video itself, and not the height of the player:
Fixed controls player:
| Vertical Video Resolution | Default quality |
|---|---|
| 0 to 183 | 240p |
| 184 to 442 | 360p |
| 443 to 663 | 480p |
| 664 to 995 | 720p |
| 996 and up | 1080p |
Fade-away controls player (for 16 x 9 videos):
| Vertical Video Resolution | Default quality |
|---|---|
| 0 to 207 | 240p |
| 216 to 468 | 360p |
| 477 to 693 | 480p |
| 702 to 1017 | 720p |
| 1026 and up | 1080p |
For example, embed a video at 800 x 450. That is an even increment of 16 x 9, so the player that loads will have fade-away controls and the default playback quality will be 360p. Now change the embed code width and height to 800 x 480. The player with fixed controls will load and the default playback quality with be 480p. In both cases, the video is 800 x 450 in resolution, but depending on the player that it uses, it will default to either 360p or 480p.
Fun fact
Of the four resolution options YouTube shows you on the embed dialog (for 16 x 9 videos), 853 x 480 is the only one that doesn't load in the player with the fade-away controls. This is because 16 x 9 does not go into 853 x 480 evenly. So you'll notice that there will be black bars on the sides of the 16 x 9 video. To actually play an 853 x 480 video in an embedded YouTube player, you'll want to choose 853 x 510 as the width and height in the embed code.